Question

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

这是我的html字段

<img src="img.jpg"> Name

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

Answer 1

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

}）;

<强>文档

Answer 2

您可以使用hover事件以下方式执行此操作。

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

Working Demo

Answer 3

安东回答说，你也可以使用这个。

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

Answer 4

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

Answer 5

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>

在鼠标悬停上显示图像

5 个答案: