CSS - 保持悬停状态“unhover”？

Question

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

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

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

有没有办法让一个div在“unhovered”之后保持打开状态？例如，如果橙色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

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