移除CSS的鼠标悬停样式

Question

我有一个标记可以使用这个规则切换悬停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?
            }
        }
    );

- James Radford

---

:hover 是一个伪类，不是 JavaScript 可以移除的真正类。 - KRyan

你能发布你的HTML代码吗？或者更好的方式是使用jsFiddle。 - Dev

我确实尝试过Fiddle，但它的标记语言非常复杂，因此很难发布任何有意义的内容。 - James Radford

我正在尝试使用:hover，但是没有成功。只是想看看出了什么问题。 - James Radford

使用Firefox插件，能否查看在鼠标悬停时正在使用哪些样式？我正在使用Firebug但它并没有完全展示我需要的内容。 - James Radford

Answer 1

您需要对 :hover 规则进行一些限制，并让 JavaScript 更改元素，使其不再适用。可以像这样实现：

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

接着你的JavaScript会执行以下操作：

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

你无法移除:hover，但是你可以移除has-hover类，因为规则需要同时存在两者，这将防止应用.has-hover:hover规则。

- KRyan