CSS - 在 "unhover"上保持悬停状态？

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%');
}

希望这对您有所帮助!