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

そもそも .portfolio li a がホバーされていることを IE が認識していないようで、.portfolio li a ではなく .portfolio li がホバーされていると認識します。これを正しく機能させる方法はありますか？

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 に答える