0

请注意：代码适用于除 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');
   });

代码：

._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 类时，工具提示会完美显示。但是当我将鼠标悬停在它上面时，它就会消失。我假设切换存在问题。

4

3 回答 3

1 
try this

$(document).on('mouseenter mouseleave', '.inter [class]', function(event) {
$('.' + this.className + 't').toggle(event.type =='mouseenter');
       })
于 2013-05-27T03:39:42.737 回答
0

你可以使用$.hover()

$.hover(function() { $('._22').show() }, function() { $('_22').hide() });
于 2013-05-27T02:04:25.160 回答
0

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

$("<selector>").hover(
  function () {
    $('._22t').show();
  },
  function () {
    $('._22t').hide();
  }
);
于 2013-05-27T02:05:03.997 回答