删除css悬停样式 [英] remove css hover style

问题描述

我有使用此规则切换悬停CSS样式的标记.当面板内有一个复选框时，我想删除背景图像样式.这可能吗?我尝试了以下方法，尽管失败了.

I have mark up that toggles the hover css style using this rule. When there's a checkbox inside the panel I want to remove the background image style. Is this possible? I've tried the following although it fails.

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更改该元素，使其不再适用.像这样:

What you need to do is put some restriction on your :hover rule, and have your JavaScript change the element so it no longer applies. Something like this:

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

然后您的JavaScript执行此操作:

And then your JavaScript does this:

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

您不能删除:hover，但是您可以删除has-hover类，并且由于该规则要求同时使用这两个类，因此这将阻止应用.has-hover:hover规则.

You can't remove the :hover but you can remove the has-hover class, and since the rule requires both, this will prevent the .has-hover:hover rule from being applied.

这篇关于删除css悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！