1

我是一个 jQuery 新手，所以请耐心等待。

我正在尝试使用 jQuery 在列表项内的锚点内悬停时淡入 h6 标记，但 IE 无法识别我的光标悬停在锚点上，因为列表项位于它的顶部标记。它适用于所有其他浏览器，但不适用于 IE9 及更低版本。

这是为了更清晰的标记：我有一个带有 HTML 的投资组合缩略图列表，如下所示：

<ul class="portfolio">
 <li>
  <span class="top-right-corner"></span>
  <span class="bottom-left-corner"></span>
  <a class="popup" href="#interact"><h6>Interact Live</h6></a>
  <img alt="Interact Live" src="images/interact-thumb.jpg" width="529" height="260" />
 </li>
</ul>

为此，CSS 如下：

.portfolio {
display:inline-block;
overflow:visible;
margin-bottom:40px;
}

.portfolio li {
float:left;
z-index:1;
margin-right:35px;
margin-bottom:58px;
position:relative;
}

.portfolio li.right {
margin-right:0;
}

.portfolio li a {
display:block;
cursor:pointer;
border:1px solid #57bfe6;
position:absolute;
width:99.7%;
height:99.5%;
top:0;
z-index:9;
left:0;
text-decoration:none;
}

.portfolio li a h6 {
background:rgba(3,85,117,0.9);
box-shadow:0 0 40px 30px #003e57 inset;
font-size:66px;
color:#ddf6ff;
text-align:center;
padding-top:100px;
height:163px;
width:99.6%;
}

.portfolio li img {
display:block;
border:3px solid #023d53;
}

.top-right-corner {
background:url('images/about-icons.png') no-repeat -38px -198px;
height:45px;
width:45px;
position:absolute;
top:-10px;
right:-10px;
z-index:10;
}

.bottom-left-corner {
background:url('images/about-icons.png') no-repeat -32px -254px;
height:45px;
width:45px;
position:absolute;
bottom:-10px;
left:-10px;
z-index:10;
}

淡入 h6 标记的​​ jQuery 似乎有问题，我不确定如何为 IE 正确解决此问题：

  $(".portfolio li a h6").hide();
  $(".portfolio li a").hover(function(){
    $(this).children("h6").fadeIn();
  });
  $(".portfolio li a").mouseleave(function(){
    $(this).children("h6").fadeOut();
  });

似乎 IE 没有识别出 .portfolio li a 被悬停在首位，而是认为 .portfolio li 被悬停而不是 .portfolio li a。有没有办法让它正常工作？

4

2 回答 2

1

试试这个：

$(".portfolio li a").hide();
$(".portfolio li").hover(function(){
    $(this).children("a").stop(true, true).fadeIn();
},function() {
    $(this).children("a").stop(true, true).fadeOut();
});

看演示

于 2012-08-07T07:27:49.607 回答
0

问题应该与CSS有关，当锚中唯一的元素被隐藏时悬停在它上面没有意义，请注意该hover方法应该以这种方式使用：

$(".portfolio li").hover(function(){
      $(this).find("h6").fadeIn();
   },function() {
      $(this).find("h6").fadeOut();
});
于 2012-08-07T07:16:12.973 回答