在鼠标悬停上显示图像

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

});

DEMO

文档

jQuery的

的document.ready

jquery.on()

jQuery.show()

jQuery.hide()

jQuery.mouseenter

jQuery.mouseleave