javascript - 具有单选按钮行为的 JS 永久悬停状态

Question

我正在尝试使用 user Wind Shear's permanent hover solution在一组缩略图上。但是，我希望一次只将“永久悬停”状态应用于一个缩略图。因此，如果我将鼠标悬停在缩略图上并悬停在页面上，永久悬停会保持应用于该缩略图，但当我将鼠标悬停在另一个缩略图上时，它应该将第一个缩略图上的永久悬停应用到新缩略图上。

html:

<ul class="test">
    <li id="onabout">
        <a href="">Alpha</a>
        <ul>
            <li>Hiya! And it persists</li>
        </ul>
    </li>
</ul>

js:

$("#onabout").one("mouseover", function() {
    $("#onabout ul").addClass('permahover');
});

CSS:

ul {
    display: block;
    width: 200px;
}

ul li {
    display: block;
}

ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
}

ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
}

ul li ul {
    display: none;
}

ul li ul.permahover {
    display: block;
}

这是来自 Wind Shear 问题的 jsfiddle:http://jsfiddle.net/jlratwil/w83BW/

永久悬停功能效果很好，但我不知道如何将其修改为一次仅应用于一个缩略图。谢谢!

Answer 1

使用.on()代替.one()

$("#onabout").on("mouseover", function() {
    $("#onabout ul").removeClass('permahover');
    $(this).find("ul").addClass('permahover');
});