IE 8 中的 jQuery css 切换错误

Question

请注意:代码适用于除 IE 8 及以下版本以外的所有浏览器。

JS fiddle :http://jsfiddle.net/6tTcq/ (JS fiddle 在问题所在的 IE 8 中不起作用。)

程序:jQuery 切换 css 类 ._22t 然后类 ._22 悬停。(工具提示)适用于除 IE 8 及以下版本之外的所有浏览器。

问题:自从我将以下代码添加到 ._22t:hover 后，工具提示在 IE 8 中不再有效。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
background-color: black;
filter: alpha(opacity=10);

我不明白为什么 filter 属性会破坏 css 切换？

HTML 代码:

<div class="inter">
    <div class="_0"></div>          
    <div class="_22"><div class="_22t"><p>This is a tooltip. This is the first step for the jquery path system</p><div class="tooltiptail"></div></div></div>       
</div>

jQuery 代码:

$(document).on('mouseenter mouseleave', '.inter [class]', function(event) {     
        $('._22t').toggle(event.type === 'mouseenter');
   });

CSS 代码:

._22{
    position: absolute;
    left: 271px;
    top: 280px;
    width: 150px;
    height: 150px;
    cursor: hand; 
    cursor: pointer;
    display: block;
    background-color: blue;
}

._22t{
    position: relative;
    top: 161px;
    left: 0px;
    margin: 0;
    width: 200px;
    height: 110px;
    padding: 5px;
    background: rgb(97, 99, 101);
    background: rgba(99, 100, 103,0.9);
    border: 4px solid rgb(69, 70, 71);
    border: 4px solid rgba(69, 70, 71, 0.9);
    display: none;
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

._22:hover {
    background: rgba(0, 0, 0, 0.1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    background-color: black;
    filter: alpha(opacity=10);
}

.inter {
    position: relative;
    width: 716px;
    height: 604px;
    background-image: url('0.png');
}

当我将显示更改为阻止 ._22t 类时，工具提示完美显示。但是当我将鼠标悬停在它上面时，它就会消失。我假设切换有问题。

Answer 1

try this

$(document).on('mouseenter mouseleave', '.inter [class]', function(event) {
$('.' + this.className + 't').toggle(event.type =='mouseenter');
       })