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提出的问题：http://jsfiddle.net/jlratwil/w83BW/

永久悬停功能效果很好，但我无法弄清楚如何将其修改为一次仅应用于一个缩略图。谢谢！

Answer 1

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

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

Answer 2

使用.on代替.one并删除该类，然后将其添加到悬停元素

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

Demo

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

2 个答案: