我有一个 div,当我悬停它时它会交换图像,并使 div 可见。一切似乎都很好,但是当您进入子 div 时,悬停失败并将图像换回。我认为悬停应该继续通过子元素,因为您仍然悬停在父元素上。我在文本部分使用 mouseenter 和 mouseleave,在图像交换中尝试过,它仍然会在进入 workerData div 时失败。
这是代码。
HTML
<div id="workersAre">
<div class="workers" id="anita">
<div class="workerImage">
<img src="http://s28.postimg.org/biajzhy1p/anita.jpg" data-alt-src="http://s14.postimg.org/3v8gu1e0h/anita_Over.jpg" class="workerCover">
</div>
<div class="workerData">
<h1>Anita Art Maker</h1>
<h2>Arty, Art, Art</h2>
</div>
</div>
</div>
CSS
#workerAre{
width:100%;
}
.viveWorkers{
width:100%;
float:left;
position:relative;
}
.workerImage{
position:relative;
}
.workerCover{
width:100%;
}
.workerData{
position:absolute;
top:0;
width:100%;
text-align: center;
display:none;
}
查询
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
}).hover(sourceSwap, sourceSwap);
});
$('.workers').mouseenter(function(){
$(this).find('.workerData').show();
});
$('.workers').mouseleave(function(){
$(this).find('.workerData').hide();
});
这里是一个链接 fiddle .任何意见或正确方向的插入将不胜感激。
最佳答案
您的图片和文字是 sibling 。因此,当您将鼠标悬停在文本上时,图像的悬停结束。
使用 .workers
元素进行悬停(就像显示和隐藏文本一样),如下所示:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
});
});
$('.workers')
.mouseenter(function(){
sourceSwap.call($(this).find('img'));
$(this).find('.workerData').show();
})
.mouseleave(function(){
sourceSwap.call($(this).find('img'));
$(this).find('.workerData').hide();
});
或者将最后一部分替换为:
$('.workers')
.hover(function(){
sourceSwap.call($(this).find('img'));
$(this).find('.workerData').toggle();
});
关于javascript - Jquery 悬停在子 Div 条目上失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26655713/