使用jQuery停止样式HOVER行为?

时间:2013-01-29 11:18:43

标签: javascript jquery html css

我有一个风格的div。

这种风格

 body .d:hover
    {
      background-color:red;
    }

但是我希望(如果可能的话)Jquery会停止这种悬停行为。

我试过

 $(".d").hover(function () { return false;});
 $(".d").mouseenter(function () { return false;});
没什么帮助。

任何帮助?

这里是JSBIN (我希望按下按钮后 - 悬停时不会发生任何事情。)

8 个答案:

答案 0 :(得分:1)

为CSS添加新定义:

.d.no-hover:hover {
    background-color: black;
}

现在您只需将no-hover类添加到不再具有悬停效果的元素中:

$(obj).addClass('no-hover');

答案 1 :(得分:1)

可能是这种伎俩:http://jsbin.com/akunew/14/edit

<div style="border:solid 1px red;height:100px;width:100px;" class="d"> </div>
<input  type="button" value="stop this hover" onclick="stop()" id="btn"/>

删除课程:

function stop(){
  $(".d").addClass('e').removeClass('d');
}

答案 2 :(得分:1)

如果您想要不断停止此行为,可以根据W3C wiki删除样式表规则:

function stop(m) {
    $.each(document.styleSheets, function(i, sheet) {
        $.each(sheet.rules, function(i, rule) {
            if (new RegExp(m + "\\s*:hover").test(rule.selectorText)) {
                sheet.deleteRule(i);
            }  // TODO: improve RegExp
        });
    });
}
stop(".d");

如果要在不删除的情况下更改状态,可以选择更改styleSheet.disabled属性,以防在单独的样式表中设置:hover规则。

注意,我不确定这里的兼容性问题,还应该另外确定。

DEMO: http://jsbin.com/akunew/10/edit

答案 3 :(得分:0)

当您致电onclick="stop(this)"时,input$(obj),而不是您的元素.d

编辑没有用于删除:hover

的JavaScript解决方案

答案 4 :(得分:0)

基于你的JSBIN示例。下面的代码将起作用

功能停止(obj)     {       $(obj).hover(function(){         $(本)的CSS( '背景色', '白');         return false;});       $(obj).mouseenter(function(){         $(本)的CSS( '背景色', '白');         return false;});

  $('body').append('<style>body div.d:hover {background-color:transparent !important}</style>');
}

你有覆盖:悬停该特定元素的css

答案 5 :(得分:0)

<强> CSS

.d:hover
{
    background-color:Red;
}
.noClass
{
    background-color:none;
}

<强>的JavaScript

function stop()
{
    $(".d").addClass('noClass').removeClass('d');
}

答案 6 :(得分:0)

我使用了一个技巧 - 当我将鼠标悬停在一个元素上(并单击该HOVERed元素内的某些内容)时,您可以使用此javascript方法取消该悬停css:

document.getElementById('sarchevi').className='active';
//on mouse move, remove class
(function(){
    var moved = false
    window.onmousemove = function(e)
    { if(!moved){ moved = true;  document.getElementById('sarchevi').className ='a'; } }
})()

答案 7 :(得分:0)

我知道这个问题已有四年了,但未来的访问者应该了解解决这一特定问题的现代方法。

您可以使用一个简单的解决方案(在其核心)使用CSS属性,并且除了IE&lt;之外的所有浏览器都支持该解决方案。 11。

$('.d').css('pointer-events', 'none');

您也可以从Bootstrap中复制此特定类:

.disabled {
    pointer-events: none;
}

然后通过jQuery应用它:

$('.d').addClass('disabled');

但请注意,此CSS属性会阻止元素捕获任何DOM事件(例如悬停,但单击等)