0

jqueryまたはcssを使用して、カーソルがこのようなそれぞれのメニューの上にあるときに効果のある画像を表示するにはどうすればよいですか?

cssだけでできますか、それともjqueryを使用する必要がありますか?

<html>
  <head>
     <title></title>    
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script>
         $(document).ready(function(){
            $("#menu img" ).on( "click", function() {
                $("#menu img" ).hide( 1500 );
            });
         });
     </script>
  </head>
  <body>
     <button id="btn" type="button">Click Me!</button>
     <div id="menu">
         <ul>
             <li><a href="">Menu1<img src="images/1.jpg" /></a></li>                    
             <li><a href="">Menu2<img src="images/2.jpg"/></a></li> 
             <li><a href="">Menu3<img src="images/3.jpg"/></a></li>
         </ul>
     </div>
  </body>
</html>
4

4 に答える 4

1

CSS トランジションを使用する:

#menu li img {
  -o-transition:color .2s ease-out, background 2s ease-in;
  -ms-transition:color .2s ease-out, background 2s ease-in;
  -moz-transition:color .2s ease-out, background 2s ease-in;
  -webkit-transition:color .2s ease-out, background 2s ease-in;
  /* ...and now for the proper property */
  transition:color .2s ease-out, background 2s ease-in;
background-image: url('path/to/my/image.png');
}
#menu li img:hover {
background-image: url('path/to/my/image.png');
}

background-imageまたはを変更background-positionする:hover

于 2013-09-16T13:46:50.087 に答える
1

マウス ホバー時に画像を表示するために JavaScript/jQuery を使用する必要はありません。プレーンな CSS を使用できます。

HTML

<ul id="menu">
    <li></li>
    ...
</ul>

CSS

#menu li:hover {
    background-image: url('path/to/my/image.png');
    background-position: 10px 10px /* set x and y coordinates */
}

ただし、画像の表示に効果を追加する場合は、Tushars の回答でドラフトされているように jQuery を使用する必要があります。

(実際には、CSS3 ではアニメーションも使用できます。例はこちら。ただし、これによりクロス ブラウザーや下位互換性の問題が発生する可能性があることに注意してください。)

于 2013-09-16T12:15:30.817 に答える
0 
/* Hide all images first, so that they don't appear until you hover */
$('#menu li img').hide();

$('#menu li').hover(function(){
   $(this).find('img').fadeIn('slow');
},function(){
   //do what you want when mouse out
});

。フェードイン（）

于 2013-09-16T12:06:49.957 に答える