本文介绍了将鼠标悬停在按钮上时显示图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的网站.
我要执行的操作:当用户将鼠标悬停在链接上时显示图像.
我肯定犯了一些愚蠢的错误,但我不确定那是什么.
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>
这篇关于将鼠标悬停在按钮上时显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!