jQuery 鼠标悬停在图像上的jQuery show() hide()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17444912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show() hide() on mouse over image
提问by Dublay
i have some problems with a bit of javascript. i want to display a div when hovering an image:
我在使用一些 javascript 时遇到了一些问题。我想在悬停图像时显示一个 div：
<div class="slideshow">
<img src="img/picture1.jpg" id="picture1" />
<img src="img/picture2.jpg" id="picture2" />
</div>
<div class="pic1desc">
<h3>Headline</h3><br />
Text
</div>
<div class="pic2desc">
<h3>Headline</h3><br />
Text
</div>
Here is my javascript-snippet:
这是我的 javascript 片段：
$(document).ready(function() {
$('.pic1desc').hide();
$('.pic2desc').hide();
//When the Image is hovered upon, show the hidden div using Mouseover
$('#picture1').mouseover(function() {
$('.pic1desc').show();
});
//When the Image is hovered away from, hide the div using Mouseout
$('#picture1').mouseout(function() {
$('.pic1desc').hide();
});
});
This isn't working at all. Anybody got an idea for that? Thanks in advance!
这根本行不通。有人对此有什么想法吗？提前致谢！
回答by bipen
Thisis working check this out :
这是工作检查这个：
However you can reduce your code to
但是，您可以将代码减少到
$(document).ready(function() {
$('.pic1desc','.pic2desc').hide();
//When the Image is hovered upon, show the hidden div using Mouseover
$('#picture1').hover(function() {
$('.pic1desc').show();
},function() {
$('.pic1desc').hide();
});
//same for `#picture2`
OR
或者
name your div class, as image class
将您的 div 类命名为图像类
<div class="picture1">
<h3>Headline</h3><br />
Text
</div>
<div class="picture2">
<h3>Headline</h3><br />
Text
</div>
$(document).ready(function() {
$('.picture1','.picture2').hide();
//When the Image is hovered upon, show the hidden div using Mouseover
$('img[id^="picture"]').hover(function() {
$('.'+ $(this).prop('class')).show();
},function() {
$('.'+ $(this).prop('class')).hide();
});
This is dynamic and works for any number of elements.
这是动态的，适用于任意数量的元素。
And yes make sure you are loading (including) jQuery.js. That might be the problem.
是的，请确保您正在加载（包括）jQuery.js。这可能是问题所在。
回答by Martijn
How about something like thise:
这样的事情怎么样：
$(document).on('mouseover mouseout', '#picture1', function(){
// By giving this function two triggers, the same action is performed for each trigger
$('.pic1desc').toggle();
});
Or:
或者：
$(document).on('mouseenter mouseleave', '#picture1', function(){
// By giving this function two triggers, the same action is performed for each trigger
$('.pic1desc').toggle();
});
another solution might be this (if you want advanced actions to happen):
另一个解决方案可能是这样的（如果您希望进行高级操作）：
$('#picture1').on('mouseover', function(){
// something on mouseover
// this way you get more space for larger/more special actions
)}.bind('mouseout', function(){
// something on mouseout
// Same space for mouseout
});
回答by Dhaval Marthak
Do like this: use mouseenter()it's having a callbackmethod eg. mouseleave()
这样做：使用mouseenter()它有一个callback方法，例如。mouseleave()
$('#picture1').mouseenter(function() {
$('.pic1desc').show();
}).mouseleave(function(){
$('.pic1desc').hide();
});
$('#picture2').mouseenter(function() {
$('.pic2desc').show();
}).mouseleave(function(){
$('.pic2desc').hide();
});
