Question

我是一个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似乎有问题，我不确定如何正确解决这个问题：

  $(".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。有没有办法让它正常工作？

Answer 1

试试这个：

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

SEE DEMO

Answer 2

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

hover

jQuery选择li标签内的相对子元素

2 个答案:

SEE DEMO