テキストと画像を使ったJqueryマウスオーバー

基本的に私はjqueryを使って画像をフェードアウトし、ユーザーのマウスが画像上を移動するとテキストを表示させます。ここに私のコードです。テキストと画像を使ったJqueryマウスオーバー

<html> 
<head> 
<link rel="stylesheet" href="styles.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function() { 
$("#bd-text").hide(); 
}); 

$(function() { 

    $("img").mouseover(function() { 
     $(this).css('border', "solid 1px #2980b9"); 
     $(this).css('filter', "blur(3px)"); 
     $("#bd-text").show(); 
}); 

$("img").mouseleave(function() { 
    $(this).css('border', "none"); 
    $(this).css('filter', "blur(0px)"); 
    $("#bd-text").hide(); 
}); 

}); 
</script> 
</head> 

<body> 
<div id="all"> 

<p style="text-align:center"><img id="borderlands" src="borderlands2.jpg"></p> 
<p style="text-align:center"><img id="unknown" src="dev.png"></p> 

<p id="bd-text">text that fades in</p> 
<p id="dv-text">text that fades in</p> 
</div> 
</body> 
</html>

私が持っている問題は、テキストが表示されたら、それは多くの場合、ユーザーのマウスには表示されませんし、マウスをテキストの上に今あるので、イメージはもはや色あせしていることです。だから私が知りたいのは、テキストを無視させる方法があれば、ユーザーのマウスがテキストの上にあってもイメージが色あせてしまうことです。

ありがとうございました。

出典

2016-05-15 Martin Sky

こんにちは、あなたのコードを整理し、それを_compilable_にしてください。また、例をより明確にするためにHTMLを追加できますか？ –

そして、CSSコードを追加してください:) – aifrim

CSSの 'pointer-events：none; 'を追加するとこれが解決されますか？ – Tico

ポインタイベントは、著者らは、特定のグラフィック要素が#bd-text{}のスタイルルールにこのプロパティを追加し、に値を設定し、マウスevents.Justの対象になることができますどのような状況（もしあれば）の下で制御することができますCSSプロパティnone：

<html> 
<head> 
    <link rel="stylesheet" href="styles.css"> 
    <title title="test"></title> 
    <style type="text/css"> 
     #bd-text { 
      position: absolute; 
      color: #fff; 
      top: 33%; 
      width: 100%; 
      text-align: center; 
      font-size: 20px; 
      pointer-events: none; 
     } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script> 
     $(function() { 

      $("#bd-text").hide(); 

      $("img").mouseover(function() { 
       $(this).css('border', "solid 1px #2980b9"); 
       $(this).css('filter', "blur(5px)"); 
       $("#bd-text").show(); 
      }); 

      $("img").mouseleave(function() { 
       $(this).css('border', "none"); 
       $(this).css('filter', "blur(0px)"); 
       $("#bd-text").hide(); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="all"> 
     <p style="text-align:center"><img id="borderlands" src="/Images/image1.jpg"></p> 
     <p style="text-align:center"><img id="unknown" src="Images/image2.jpg"></p> 
     <p id="bd-text">text that fades in</p> 
     <p id="dv-text">text that fades in</p> 
    </div> 
</body> 
</html>

出典

2016-05-16 05:00:48

テキストと画像を使ったJqueryマウスオーバー

答えて

関連する問題