Question

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

JS小提琴：http://jsfiddle.net/6tTcq/（JS小提琴将无法在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 CODE：

<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 CODE：

$(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');
       })

Answer 2

您可以使用$.hover()

$.hover(function() { $('._22').show() }, function() { $('_22').hide() });

Answer 3

使用jQuery的“悬停”功能，它可以用于键盘事件：

$("<selector>").hover(
  function () {
    $('._22t').show();
  },
  function () {
    $('._22t').hide();
  }
);

IE 8中的jQuery css切换错误

3 个答案: