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

您不必使用 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 回答
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 回答
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");
    });

});
于 2013-09-16T14:18:12.053 回答
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 回答