Question

当使用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>

Answer 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。但请注意，这可能会导致跨浏览器和向下兼容性问题。）

Answer 2

使用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

Answer 3

/* 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()

Answer 4

//文档准备好后加载此脚本 $（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");
    });

});

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

4 个答案: