javascript - 鼠标悬停时显示图像

Question

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

这是我的 html 字段

<img src="img.jpg"> Name

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

score 6 · Accepted Answer

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": ''
       });
   });;

});

文档

score 4 · Accepted Answer

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

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;
}

工作演示

score 1 · Accepted Answer

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

$(document).ready(function () {    
   $('span').hover(
    function () {
        alert("1");
        $('#test').show();
    },
    function () {
        alert("2");
        $('#test').hide();
    }
   )
});

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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;}

javascript - 鼠标悬停时显示图像

5 回答 5

Related

Reference