2

我有一个风格的 div。

这种风格

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

但我希望（如果可能的话）Jquery 将停止这种悬停行为。

我试过了

 $(".d").hover(function () { return false;});
 $(".d").mouseenter(function () { return false;});

没有任何帮助。

有什么帮助吗？

这是JSBIN（我希望在按下按钮后 - 悬停时不会发生任何事情。）

4

8 回答 8

1

向您的 CSS 添加新定义：

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

现在您可以将no-hover类添加到不再具有悬停效果的元素中：

$(obj).addClass('no-hover');
于 2013-01-29T11:24:18.113 回答
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');
}
于 2013-01-29T11:34:52.973 回答
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在单独的样式表中设置了规则。

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

演示：http: //jsbin.com/akunew/10/edit

于 2013-01-29T11:41:22.727 回答
0

当您调用onclick="stop(this)"它时，它将input成为您的$(obj)，而不是您的元素.d。

编辑没有要删除的javascript解决方案:hover

于 2013-01-29T11:27:22.410 回答
0

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

function stop(obj) { $(obj).hover(function () { $(this).css('background-color','white'); return false;}); $(obj).mouseenter(function () { $(this).css('background-color','white'); return false;});

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

你已经覆盖 :hover 那个特定元素的 css

于 2013-01-29T11:40:09.307 回答
0

CSS

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

JavaScript

function stop()
{
    $(".d").addClass('noClass').removeClass('d');
}
于 2013-01-29T11:41:18.730 回答
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'; } }
})()
于 2013-12-28T19:00:53.253 回答
0

我知道这个问题已经有四年的历史了，但未来的访客应该了解解决这个特定问题的现代方法。

您可以使用一个简单的解决方案，该解决方案（在其核心）使用 CSS 属性，并且除 IE < 11 之外的所有浏览器都支持。

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

您不妨从 Bootstrap 复制这个特定的类：

.disabled {
    pointer-events: none;
}

然后通过 jQuery 应用它：

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

但是请记住，此 CSS 属性会阻止元素捕获任何 DOM 事件（例如hover，但也可以单击 click等）

于 2017-04-06T11:54:47.467 回答