我希望有人可以帮助我！ ：）
我使用 div 标记在我的网站上写了一个小的jquery脚本替换所有 img 标记。我将图像源作为divs背景图像，图像宽度和高度作为divs的宽度和高度。这工作正常。
现在我想在鼠标悬停时将div（ var nohover ）替换为另一个div（ var hover ）并返回第一个div（ var nohover < / em>）在mouseout上。我怎样才能做到这一点？我快死了。
提前感谢并向德国问好！
非常喜欢！哈罗
$(document).ready(function() {
$('.container img').each(function() {
var $img = $(this),
href = $img.attr('src');
width = $img.attr('width');
height = $img.attr('height');
wbgclass = $img.attr("class");
var nohover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: -webkit-linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-image: linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-size: auto, cover;"></div></div>';
var hover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: url(' + href + '); background-image: url(' + href + '); background-size: auto, cover;"></div></div>';
$img.replaceWith(nohover);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="soz.jpg" width="269" height="358" alt="" />
</div>
答案 0 :(得分：0)
使用Jquery .hover（）方法：
$img.hover(function() {
$('.container').html(hover);
});
Here is a codepen demonstrating the .hover() functionality
如果您想要更具体，您还可以使用 .mouseenter（）和 .mouseleave（）作为 .hover（）方法在 .mouseenter（）和 .mouseleave（）
上运行所以你的方法看起来像：
$img.mouseenter(function() {
$('.container').html(hover);
});
$img.mouseleave(function() {
$('.container').html(nohover);
});
答案 1 :(得分：0)
结合使用mouseout和img个事件。当您替换内容并将事件绑定到容器时，还要将var href,
width,
height,
wbgclass;
$('.item').on('mouseover', function (e) {
var $this = $(this);
href = $('img', $this).attr('src');
width = $('img', $this).attr('width');
height = $('img', $this).attr('height');
wbgclass = $('img', $this).attr("class");
var hover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: url(' + href + '); background-image: url(' + href + '); background-size: auto, cover;"></div></div>';
});
$('.item').on('mouseout', function (e) {
var nohover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: -webkit-linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-image: linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-size: auto, cover;"></div></div>';
$(this).replaceWith(nohover);
});
元素包含在父元素中。
以下是您可能会做的一个粗略示例..
$http