1

如何在鼠标悬停时显示图像?我还需要在鼠标悬停时在图像旁边的文字下划线?在 mouseout 上,我必须隐藏图像并使文本再次正常。

这是我的 html 字段

<img src="img.jpg"> Name

现在,当我加载页面时,我不想显示图像,除非我将鼠标悬停在它应该出现的位置上。

4

5 回答 5

6

CSS

#test{
    display:none
}

HTML

<img id="test" src="img.jpg"/> <span>Name</span>

jQuery

  $(document).ready(function () {
   $('span').on('mouseenter', function () {
       $('#test').show();
       $(this).css({
           "text-decoration": "underline"
       });
   }).on('mouseleave', function () {
       $('#test').hide();
       $(this).css({
           "text-decoration": ''
       });
   });;

});

演示

文档

jQuery

文档就绪

jquery.on()

jQuery.show()

jQuery.hide()

jQuery.mouseenter

jQuery.mouseleave

于 2013-09-13T09:53:10.220 回答
4

您可以使用悬停事件通过以下方式执行此操作。

jQuery:

$(document).ready(function () {
    $('span').hover(function(){
        $(this).addClass('underline'); //to make text underlined on hover
        $('#image').show(); //displays image on mouse in
    },function(){
        $(this).removeClass('underline'); //remove underline on mouse out
        $('#image').hide(); //hides image on mouse out
    });
});

HTML:

<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>

CSS:

.hidden{
    display: none;
}
.underline{
    text-decoration: underline;
}

工作演示

于 2013-09-13T10:03:37.790 回答
1

正如 Anton 所回答的,您也可以使用这个。

$(document).ready(function () {    
   $('span').hover(
    function () {
        alert("1");
        $('#test').show();
    },
    function () {
        alert("2");
        $('#test').hide();
    }
   )
});
于 2013-09-13T10:04:08.843 回答
0

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Test</title> 
  <script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
  <style type='text/css'>
       #test{
        display:none
    }
  </style>
    <script type='text/javascript'>
  $(window).load(function(){
  $(document).ready(function () {
       $('span').on('mouseenter', function () {
           $('#test').show();
           $(this).css({
               "text-decoration": "underline"
           });
       }).on('mouseleave', function () {
           $('#test').hide();
           $(this).css({
               "text-decoration": ''
           });
       });;
    });
  });
  </script>
</head>
<body>
    <img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>
于 2013-12-02T18:16:10.560 回答
0

jQuery:-

    $(document).ready(function(){
       $("#textDiv").mouseover(function(){
    $("#imageDiv").hide();
   });

   $("#textDiv").mouseout(function(){
    $("#imageDiv").show();
   });
    });

HTML:-

    <div id="textImage">
       <div id="imageDiv" style="float:left;">
          <img src="../images/login_background.png"></img>
       </div>
       <div id="textDiv"style="float:left;">
          <a href="#">Name</a>
       </div>
</div>

CSS:-

    #textImage a {text-decoration:none;}
    #textImage a:hover {text-decoration:underline;}
于 2013-09-13T13:01:03.997 回答