背景颜色粘在Internet Explorer 11中

At first, I was trying to make it so :hover over a div element would change the background color. I did this with just simple CSS. It worked in Chrome and some earlier IE versions I've checked. With IE 11 though, when my mouse leaves the div, the hover background color stayed there.

起初,我试图这样做:将鼠标悬停在div元素上会改变背景颜色。我用简单的CSS做到了这一点。它在Chrome和我检查过的早期IE版本中有效。但是,使用IE 11,当我的鼠标离开div时,悬停的背景颜色仍然存在。

So then I used jQuery to, on hover, add a class on hover and remove the class on mouseleave (and in the CSS file I associated the hover background color with this class). I used console.log to check that it was in these parts properly, and they were there, but removeClass('class-name') just is not actually removing the class in IE 11 for some reason.

所以我在悬停时使用jQuery在悬停时添加一个类并在mouseleave上删除类(在CSS文件中我将悬停背景颜色与此类相关联)。我使用console.log检查它是否在这些部分正确,并且它们在那里,但是removeClass('class-name')实际上并没有因为某些原因在IE 11中删除该类。

I tried to use setClass and classList.remove/add too and could not remove the added class. Even though console.log showed that I was right there in the code that would do this.

我试图使用setClass和classList.remove / add也无法删除添加的类。即使console.log显示我在代码中就是这样做的。

So then I tried to, instead of adding/removing a class, just change the background color directly with hover events in jQuery, like $('div.target').css('background-color', 'color'). This worked the first two times. On hover, it changed to the hover background color, then leaving, it changed to the other color. But then I couldn't hover over the div again to get the hover color to come back.

所以我尝试了,而不是添加/删除一个类,只是直接用jQuery中的悬停事件更改背景颜色,比如$('div.target')。css('background-color','color')。这是前两次工作。在悬停时,它变为悬停背景颜色,然后离开,它变为另一种颜色。但是我不能再次盘旋在div上以让悬停颜色回来。

Any tips or knowledge about quirks that could cause these issues?

有关可能导致这些问题的怪癖的任何提示或知识?

1 个解决方案

#1

The following snippet use JQuery mouseleave and mouseenter to perform a background-color changing. Works with IE 9+.

以下代码段使用JQuery mouseleave和mouseenter来执行背景颜色更改。适用于IE 9+。

JSFiddle

HTML

<div class="myDiv myDiv-red">

</div>

CSS .myDiv { height : 30px; width : 30px; }

CSS .myDiv {身高:30px;宽度:30px; }

.myDiv-red
{
    background-color : red;
}

.myDiv-green
{
    background-color : green;
}

JQuery

$(function() {
    $(".myDiv").mouseenter(function() {
       $(this).removeClass("myDiv-red").addClass("myDiv-green");
    });

    $(".myDiv").mouseleave(function() {
       $(this).removeClass("myDiv-green").addClass("myDiv-red"); 
    });
});

#1