将鼠标悬停在按钮上时显示图像 [英] Display image when hover over button

问题描述

这是我的网站.

我要执行的操作:当用户将鼠标悬停在链接上时显示图像.

我肯定犯了一些愚蠢的错误，但我不确定那是什么.

I am definitely making some stupid mistake but I am not really sure which.

这就是我所做的:

HTML

<ul class="nm">
    <li><a href="#">Cork</a>
        <div class="place-image">
          <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
        </div>
    </li>

  .......Remaining  li's.....
</ul>

CSS

.place-image{
    display:none;
}

div.place-image{
    width:326px;
    height:326px;  
}

javascript

$('.place-image').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

请帮帮我.

推荐答案

您希望将鼠标悬停在隐藏的元素上.这就是为什么您的代码无法正常工作的原因.您无法在隐藏元素上触发事件.

You where tying to hover a hidden element. That is why your code was not working. You cannot trigger an event on a hidden element.

$('a').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

这篇关于将鼠标悬停在按钮上时显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！