.hoverでテキストの点滅を固定する

Question

ユーザーが画像の上を移動すると、altタグ情報が表示されます。ここで私が使用しているjQueryがあります。これはうまくいきます。

<script> 
$("#content img").hover(function() { 
    var imageCaption = $(this).attr("alt"); 
    if (imageCaption != '') { 
     var imgWidth = $(this).width(); 
     var imgHeight = $(this).height(); 
     var position = $(this).position(); 
     var positionTop = (position.top + imgHeight - 26) 
     $("<span class='img-caption'><em>" + imageCaption + 
      "</em></span>").css({ 
      "font-style": "normal !important", 
      "color": "#fff", 
      "position": "absolute", 
      "top": "200px", 
      "left": "5px", 
      "width": "80%" 
     }).insertAfter(this); 
    }},function(){$(this).siblings('.img-caption').remove();} 
); 
</script> 

しかし、ユーザーがテキストの上にカーソルを置くと、文字が点滅します。マウスはimgを離れ、作成されたspanを入力しているため、私はそのことを仮定します。この問題に対する解決策は非常に高く評価されます。

Answer 1

jsFiddle：私は、CSSファイル、あなたは自分のCSSファイル内のクラスをターゲットにすることができたときに、インラインスタイルを配置する必要はありませんにあなたの要素のスタイルを移動したhttps://jsfiddle.net/m3h8bffw/

:)これも簡単に変更することができます

CSS

.img-caption { 
    font-style: normal !important; 
    color: #fff; 
    position: absolute; 
    top: 200px; 
    left: 5px; 
    width: 80%; 
    pointer-events: none; 
} 

はあなたが欠落していた唯一の部分は、基本的には、あなたは、単にイベントを無視してページの要素を伝えることができ、「ポインタイベント」です。

これで、ユーザーがimgの上にマウスを置くと、ユーザーがスパンの上にマウスを置くとマウスイベントが無視されます。

http://caniuse.com/#feat=pointer-events https://developer.mozilla.org/en/docs/Web/CSS/pointer-events