删除 CSS 悬停样式答案

【问题标题】：remove css hover style删除 CSS 悬停样式
【发布时间】：2012-09-26 16:58:33
【问题描述】：

我已标记使用此规则切换悬停 css 样式。当面板中有一个复选框时，我想删除背景图像样式。这可能吗？虽然失败了，但我尝试了以下方法。

CSS：

   .StaffMode .day ul li.standard a:hover table {
        background:url("test.png"); 
    }

JS：

   $("li.test table li").hover(
        function () {
            if($(this).children(':checked')) {
              alert('need to remove the background image style');  // shows as expected
              $(this).children('a').removeClass('hover');  // this doesnt work?
            }
        }
    );

【问题讨论】：

:hover 是一个伪类，不是 JavaScript 可以删除的真实类。
你能发布你的 HTML 或者更好的 jsFiddle
我确实尝试过小提琴，但它的标记真的很复杂，所以很难发布任何有意义的东西。
我正在尝试：hover 虽然没有乐趣。只是看看它是怎么回事。
是否可以使用 firefox 插件查看悬停时使用的样式？我正在使用萤火虫，但它并没有完全显示我需要什么。

标签： jquery html css dhtml

【解决方案1】：

您需要做的是对您的:hover 规则设置一些限制，并让您的 JavaScript 更改该元素，使其不再适用。像这样的：

.has-hover:hover
{
    /* do whatever */
}

然后你的 JavaScript 会这样做：

$(this).children('a').removeClass('has-hover');

您不能删除 :hover，但可以删除 has-hover 类，并且由于规则需要两者，这将阻止应用 .has-hover:hover 规则。

【讨论】：