Question

我正在尝试更改图片＆＃34; B＆＃34;当我将鼠标悬停在链接的图片上时＃A＆＃34;

与此http://jsfiddle.net/davidThomas/JsX8x/1

类似

    <div id="a">
    <img src="http://www.lorempixel.com/200/400/nature" />
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
    </div>

但是在这个例子中我希望第一张图片也链接到另一页。

当我尝试链接此图片时，它会打破图像B的图片更改

任何见解都会有所帮助

澄清（来自评论）：

我想根据各种链接更改一张图片。

示例页面位于：http://mouco.com/testerre

我希望超级朋友的图片能够根据所选择的链接进行更改。

也有链接改变....

页面上的

唯一具有翻转的链接是＆＃34;历史记录＆＃34;链接，但我希望他们所有人都像这样改变，同时根据链接将图像改为不同的图像......

Answer 1

将图像包裹在“a”标签中并相应地更改样式。

HTML

<div id="a">
    <a href="google.com"><img src="http://www.lorempixel.com/200/400/nature" /></a>
    <a href="google.com" class="first"><img src="http://www.lorempixel.com/200/400/people" /></a>
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>

CSS

#a img.second,
#a a.first:hover ~ img.second {
    display: none;
}

#a a:hover ~ a.first {
    display: none;
}

#a a:hover ~ img.second {
    display: inline-block;
}

jsfiddle

Answer 2

在您要使用的图片周围添加超文本参考链接

    <div id="a">
    <a href="www.website.com">**<img src="http://www.lorempixel.com/200/400/nature" /> </a>
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
    </div>

如何更改图像＆＃34; B＆＃34;将鼠标悬停在没有JavaScript的链接图像A上

2 个答案:

jsfiddle