Question

听我们再次来到这里，我遇到了麻烦，我不知道如何在网上搜索我的问题（我搜索过“删除悬停”，我找不到我想要的东西）。

我有这样的风格：

.myStyle li:hover
{
     background: #9999FF;
}

我的html中有这个

<ul class="myStyle">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>

我也有这个脚本

$('ul li').on('click', function() {
     $(this).prependTo(list.closest('ul'));
}

所以现在，它的工作完美，但是li移动后点击保留了类的颜色（＃9999FF），并且在我将鼠标移到那里之前不会退出。我试图用removeClass删除类，但它不起作用，请帮助我。

对我的问题有任何想法吗？

谢谢你的时间！

Answer 1

不，你不能，但是你可以不将样式附加到标签而不是类，并且在悬停事件中你可以删除/添加类。

在jQuery中，hover是mouseenter和mouseleave事件的组合，因此您可以为悬停开始绑定处理程序：

CSS：

.hoverable {
    /* your styles */
}
.hoverable:hover {
    /* your styles you want not to attach */
}

HTML：

<ul>
    <li class="hoverable">Hover not makes effect</li>
    <li>Hover makes effect</li>
</ul>

Javascript：

var className = 'hoverable'; 
$('ul li').on('mouseenter', function(e) {
    $(this).removeClass(className); 
}).on('mouseleave', function(e) {
    $(this).addClass(className);
});

（jsfiddle是here）

所以它可以防止不必要的影响。

当然，您可以重新定义样式并将所有不需要的样式设置为“继承”等，而不是这样，这将是更好的解决方案。

此外，StackOverfow上有类似的问题：Can I disable a CSS :hover effect via JavaScript?

Answer 2

它不是：然后悬停，如果点击后保留颜色，则：激活，

尝试重置：活动颜色

.myStyle li:active{
  color:#<put-previous-color-hex-value-here>;
}

Answer 3

这似乎有效：为了测试，我将“list”改为“.myStyle”。根据您的需求进行更改。

http://jsfiddle.net/EhBD4/

$(document).ready(function(){
  $('ul li').on('click', function() {
     $(this).prependTo($('.myStyle').closest('ul'));
     $(this).css("background-color", "transparent");
  })
})

如何删除班级悬停

3 个答案: