在相应的菜单悬停上显示有效的图像

时间:2013-09-16 12:03:59

标签: jquery html css

当使用jquery或css将光标悬停在this等相应菜单上时,如何显示具有效果的图像?

我可以通过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 个答案:

答案 0 :(得分: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中你也可以使用动画; examples here。但请注意,这可能会导致跨浏览器和向下兼容性问题。)

答案 1 :(得分: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

答案 2 :(得分: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
});

.fadeIn()

答案 3 :(得分:0)

//文档准备好后加载此脚本     $(document).ready(function(){

    // Get all the thumbnail
    $('menu li a').mouseenter(function(e) {

        // Calculate the position of the image image
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image image
        $(this).css('z-index','15')
        .children("div.image")
        .css({'top': y + 10,'left': x + 20,'display':'block'});

    }).mousemove(function(e) {

        // Calculate the position of the image image            
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;

        // This line causes the image will follow the mouse pointer
        $(this).children("div.image").css({'top': y + 10,'left': x + 20});

    }).mouseleave(function() {

        // Reset the z-index and hide the image image 
        $(this).css('z-index','1')
        .children("div.image")
        .animate({"opacity": "hide"}, "fast");
    });

});