Question

因此，当鼠标悬停在div上时，我正试图让onMouseOver替换图像，不幸的是，因为我现在只有当鼠标直接在图像上而不是div时它才会替换图像，有没有办法让这个工作？

我应该使用CSS来放置图像，而是在悬停时替换图像吗？

<div class="link">
     <a href="link.html">
          <img src="img.png" onMouseOver="this.src='hoverimg.png'" onMouseOut="img.png'"
          <div class="title">Title</div>
     </a>
</div>

Answer 1

我更喜欢使用CSS：

<div class="image-hover">
    Some title
</div>

.image-hover { background: url(...);}
.image-hover:hover { background: url(...);}

Answer 2

这可以通过CSS和背景图像来实现。您也不应该在内联元素（a）中使用块级元素（div）。我把它交换了一段时间。例如：

<style type="text/css">
.link a {
    display:inline-block;
    background: url('img.png') top left no-repeat;
    width:(imagewidth)px;
    padding-top:(imageheight)px;
}
.link a:hover {
    background: url('hoverimg.png') top left no-repeat;
}
</style>

<div class="link">
     <a href="link.html">
          <span class="title">Title</span>
     </a>
</div>

完全优化将两个图像组合成所谓的精灵并使用背景位置。

Answer 3

您可以使用CSS或jQuery执行此操作。大多数人会建议您使用CSS，因为它更容易调试：

如果您希望在将鼠标悬停在div上时更改图像，可以将：悬停状态应用于div：

.link img{
    background: url("image1.png");
}

.link:hover img
{
    background: url("image2.png");
}

但是您应该注意，这基本上将img视为内联块元素，并且不会更改src属性。

jQuery将允许您更改源代码，但如果出现问题则必须进行调试，如果JS被禁用，则无法运行。

$(".link").hover(function(){
    $(this).find("img").attr("src", "image2.png");
}).mouseout(function(){
    $(this).find("img").attr("src", "image1.png");
});

div上的onMouseOver

3 个答案:

JSFiddle