jQuery Hover Altタグの問題

Question

私は最近、画像の中央に表示されている画像のaltタグを取得する質問をしました。この画像のaltタグは、この次のコードでうまくいきました。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#illustration-content ul li img').hover(
      function(){ 
       $(this).css('opacity','.2'); 
       var a = $(this).attr('alt'); 
       $(this).parent().append('<div class="title">' + a + '</div>'); 
      }, 
      function(){ 
       $(this).css('opacity','1'); 
       $(this).next().remove('.title'); 
      } 
     ); 
    }); 
</script> 

これは素晴らしいです。

私が今問題になっているのは、カーソルがaltタグの上を画像の中央に移動すると、全体の効果が消えるということです。私は、カーソルが画像から離れるときにエフェクトを消したいだけです。

ここに私が使用しているCSSがあり、htmlはイメージの直接的なULリストです。

#illustration-content ul li img{ 
    position: relative; 
} 

.title{ 
    position: absolute; 
    z-index: 1000; 
    width: 100px; 
    margin: 80px 0px 0px -150px; 
    color: #fff; 
    font-size: 18px; 
    display: inline-block; 
} 

私は試したし、インラインブロック、同じ結果せずに、しかし、タグは違った位置にする必要がありました。

これはなぜ起こっているのでしょうか？ここで

は、問題の例である：すべてのサポートのためhttp://jsfiddle.net/ysSJu/

感謝。

Answer 1

説明

理由：ここで

var $images = $('#illustration-content ul li img'); 
$images.hover(
    function(){ 
     $images.css('opacity', 1).siblings().remove('.title'); 
     var $this = $(this), 
      a  = $this.attr('alt'); 
     $this.css('opacity','.2').parent().append('<span class="title">' + a + '</span>'); 
    }, 
    function(event){ 
     if (!$(event.relatedTarget).hasClass('title')) { 
      $(this).css('opacity','1').siblings().remove('.title'); 
     } 
    } 
); 

はデモです：あなたは img要素の opacityと .remove() INGの余分な .title要素をリセットすることでこれを修正することができますtitleは、 img要素のイベントのみがあるためです。
代わりに、ユーザーが li全体にイベントをリンクする必要があります。その結果、ユーザーがリスト項目の上を移動すると、 div.titleを含む要素全体が影響を受けます。上の画像で

、あなたはそれがどのように動作するかを確認することができます。

現在、イベントは緑色に対応するもの、imgです。 これは、div.titleがimg要素の内部にないため、黄色のdiv.titleが「外部」要素として扱われるため、div.titleにカーソルを合わせるとmouseleaveイベントが発生することを意味します。
イベントをli、赤にリンクすると、イベントには緑の枠内のすべてのものが表示されます。緑の枠は緑のとです。

liブロックをdisplay: inline-blockとして扱う必要があります。これにより、画像に対してタイトルを配置できるようになります。

だから、基本的に、私が言うことをしようとしていることは、あなたがそれに応じてコードを調整後

$('#illustration-content ul li'); 

を行う必要があります代わりに

$('#illustration-content ul li img'); 

で、です。

---

ソリューション

Here is a working solution。

var $lis = $('#illustration-content ul li'); 

$lis.each(function(index, el){ 
    var $this = $(el); 
    var eImg = $("img", $this); 

    $this.mouseenter(function(){ 
     var eTitle = $('<div class="title">' + eImg .attr('alt') + '</div>'); 
     eImg.css('opacity','.1'); 
     $this.prepend(eTitle); 
    }).mouseleave(function(){ 
     var eTitle = $("div.title", $this); 
     eImg.css('opacity','1'); 
     eTitle.remove('.title'); 
    }); 
}); 

---

代替ソリューション

代わりに作成しておきmouseenter/mouseleaveでのdivを破壊するのではなく、document.ready()で一度だけのdivのを生成し、表示/ユーザが、上に置いたときにそれらを非表示にする方がよいかもしれませんそれら。
実際には全体のパフォーマンスが向上するはずです。デフォルトでは

Here's an example.

、.titleは、スタイルプロパティdisplay: noneを持っています。良い

var $lis = $('#illustration-content ul li'); 

$lis.each(function(index, el){ 
    var $this = $(el); 
    var eImg = $("img", $this); 
    var eTitle = $('<div class="title">' + eImg.attr('alt') + '</div>'); 

    $this.prepend(eTitle) 
     .mouseenter(function(){ 
      eImg.css('opacity','.1'); 
      eTitle.show(); 
     }) 
     .mouseleave(function(){ 
      eImg.css('opacity','1'); 
      eTitle.hide(); 
     }); 
}); 

---

追加情報は、私がhoverの代わりにmouseenterとmouseleaveを使用

注意を知っています。ホバーは、実際には、これらの2つのイベントを組み合わせたものの略記機能です。私は一般的に読みやすく、信頼性が高いので、前者を使う傾向があります。

また、両方のソリューションで、私は関数.each()を使用しました。 要素を変数に代入することで、JQueryはノードを参照するたびにノードを見つけるために処理を無駄にする必要はありません。より効率的になります。この

$(".title", parent_element).css(...); 

ように、セレクタの2番目のパラメータとして素子を通過させることによって

Iは.children()又は.next()ような関数を使用する必要はありません。それはまた非常に効率的です。あなたはposition ING、have a look at thisで苦労した言及

、それは物事を明確にすることがあります。

---

これらの長いポストは読みにくいですか？まあ、私は必要なものすべてをカバーしていると思います。

幸運&ハッピーコーディング！ :)

Answer 2

変更.hover。 .mouseenterおよび.mouseleaveになります。

したがって、基本的

...

var images = $('#illustration-content ul li img'); 
images.mouseenter(function(){ 
    $(this).css('opacity','.2'); 
    var a = $(this).attr('alt'); 
    $(this).parent().append('<div class="title">' + a + '</div>'); 
}); 
images.mouseleave(function(){ 
    $(this).css('opacity','1'); 
    $(this).next().remove('.title'); 
}); 

あなたが指摘したように、外側のIMGにもはや火災にホバーイベントが発生し<div> ALTの上にマウスを移動する理由。しかし、mouseenterとmouseleaveを指定すると、<div>はmouseleaveを<img>に発しません。

Answer 3

あなたはそれがあなたのmouseout機能で.title要素であるかどうかを確認するためにevent.relatedTargetプロパティを確認することができます。

  function(event){ 
       if (!$(event.relatedTarget).hasClass('title')) { 
        $(this).css('opacity','1').siblings().remove(); 
       } 
      } 

はデモ：http://jsfiddle.net/ysSJu/1/

はまた、私は関数はあなたがいないコールチェーンどのように注意してください2つのjQueryオブジェクトをthisから作成する必要があります。

UPDATE

私はあなたが別の画像からカーソルを移動した場合、それは以前のイメージからする必要がありますよう.title要素が削除されないことことに気づきました。あなたが上にカーソルを移動時にエフェクトが消えなぜhttp://jsfiddle.net/ysSJu/3/