javascript - 悬停文本菜单时更改 IMG src

Question

目前我正在使用下面的代码来更改图像，但我需要做的是在将鼠标悬停在图像的标题链接上的同时更改图像

onmouseover="this.src='Images/img.png'" onmouseout="this.src='Images/img2.png'"

例如当有人将鼠标悬停在标题链接上时，例如“鸡肉菜单”下面的图像将从 img.png 更改为 img2.png，其中 img.png 是首页，img2.png 是可以找到我的菜单列表的地方

Answer 1

如果你只想使用 CSS 来做到这一点，你可以使用 adjacent sibling combinator (+).

将您的 HTML 视为 -

<div id="headingtext">HEADING</div>
<div id="imgDiv"></div>

CSS 可以是 -

#headingtext:hover + #imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-3.png");
    background-repeat:no-repeat;
    height:500px;
}

#imgDiv {
    background-image: url("https://images.blogthings.com/thesingleflowertest/flower-5.png");
    background-repeat:no-repeat;
    height:500px;
}

fiddle 演示: http://jsfiddle.net/3z8CN/