css - CSS - 保持悬停状态“取消悬停”？

Question

我有一排 5 个 div，当你将鼠标悬停在一个上时，它会填满屏幕的宽度。

蓝色 div 默认填充屏幕宽度；这样屏幕总是满的，当我将鼠标悬停在其他 div 上时，我可以应用 css 来缩小它，因为它是在 HTML 中最后声明的：

#green{
    width:20px;
}
#blue{
    width:100%;
}
#green:hover{
    width:100%
}
#green:hover ~ #blue{
    width:20px;   
}

有没有办法让一个 div 在“悬停”后保持打开状态？例如，如果橙色 div 已打开并且鼠标离开它但没有移到另一个彩色 div 上，它可以保持其全宽。目前，当鼠标滚下时，div 会滑回蓝色。

另外，我可以在没有任何脚本的情况下执行此操作吗？

Answer 1

不，没有 javascript，你无法做到这一点。但这里有一些您可以使用的示例代码：

<div id="green" onmouseover="green()">foo</div>

<div id="blue" onmouseover="blue()">more foo</div>

<div id="pink" onmouseover="pink()">even more foo</div>

和脚本：

function green() {
    $('div').css('width','20px');
    $('#green').css('width','100%');
}

function blue() {
    $('div').css('width','20px');
    $('#blue').css('width','100%');
}

function pink() {
    $('div').css('width','20px');
    $('#pink').css('width','100%');
}

希望这可以帮助！

Answer 2

是的，您可以使用 CSS 动画在没有脚本的情况下完成。见http://cdpn.io/GLjpK

它不像使用脚本那样可靠，但它是可能的——甚至在悬停后保留它，这是具有挑战性的部分。