我的 jQuery 代码有问题。当我在蓝色按钮 (icon_disabled
) 上鼠标输入时,我想向其添加类 icons-visible
,它显示其白色背景,我想显示 disabled_list
(图片上的红色 p
)。当我离开红色 disabled_list
我想再次 display: none
并删除我之前添加的类。控制台日志工作正常,但我无法删除类和 display: none
红色 p
。为什么? :(
var icon_disabled = document.querySelector("#block-plywajaceikony p:nth-child(2)");
var disabled_list = document.querySelector("#block-plywajaceikony p:nth-child(5)");
$(icon_disabled).mouseenter(function() {
$(this).addClass("icons-visible");
$(disabled_list).css("display","block");
});
$(disabled_list).mouseleave(function() {
$(icon_disabled).removeClass("icons-visible");
$(this).css("display","none");
console.log("testing");
});
HTML:
<div id="block-plywajaceikony">
<p>...</p>
<p>...</p> //here I add and trying to remove class "icons-visible"
<p>...</p>
<p>...</p>
<p>...</p> //here is my red p with icons
</div>
最佳答案
在 Firefox 中对我来说工作正常:https://jsfiddle.net/6zbnseL3/4/
var icon_disabled = document.querySelector("#block-plywajaceikony p:nth-child(2)");
var disabled_list = document.querySelector("#block-plywajaceikony p:nth-child(5)");
$(icon_disabled).mouseenter(function() {
$(this).addClass("icons-visible");
$(disabled_list).css("display","block");
});
$(disabled_list).mouseleave(function() {
$(icon_disabled).removeClass("icons-visible");
$(this).css("display","none");
console.log("testing");
});
但是,我认为您应该采用另一个交互概念。将鼠标悬停在一个元素上并通过将鼠标悬停在另一个元素上将其删除是非常不直观的。最好使用用户已知的交互元素。例如一个开关:点击按钮 -> 按钮改变颜色(按下状态) -> 内容出现 -> 再次点击按钮停用。 (可以使用复选框完成)。
关于javascript - mouseleave() 不删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57269288/