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

【问题标题】：CSS - Keep hover state on "unhover"?CSS - 保持悬停状态“取消悬停”？
【发布时间】：2013-03-28 13:47:32
【问题描述】：

我有一排 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 会滑回蓝色。

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

【问题讨论】：

没有任何脚本？我不这么认为...

标签： css html hover transition

【解决方案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%');
}

希望这会有所帮助！

【讨论】：

太棒了！这很完美。我不知道任何JavaScript，但我明白了。我不得不用“document.getElementById ...”替换以 $ 开头的行，但除此之外，太棒了！
如果你没有可用的 JQuery（$），你可能需要做更多的转换；一行可能是“...byId('blue').style.width = '100%';”。如果它对您有用，那么您可能已经知道了。

【解决方案2】：

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

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

【讨论】：