更改父容器悬停时的图像URL

Question

一旦用户将鼠标悬停在列表项上的任何文本（例如Hello）上，我就需要更改图像。

<li id="li1"> <img id="img1" width="50" height="50"/>Hello</li>

#li1{
    list-style:none
}
#li1:hover{

}

#img1
{
    content: url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png');
}
#img1:hover{
    content: url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png');
}

但是，只有当使用悬停在图像上时，我才能实现更改图像。

是否可以仅使用CSS执行此操作？

jsfiddle here

Answer 1

正如Paulie_D的评论中所述，不应依赖content属性，而是可以在悬停时触发图像的可见性，您只需将其应用于父li：

将您的HTML更改为：

Demo Fiddle

<li>
    <img src='http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png' />
    <img src='http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png' />Hello</li>

然后使用以下CSS：

li {
    list-style:none
}
img {
    height:50px;
    width:50px;
}
li img:last-of-type {
    display:none;
}
li:hover img:first-of-type {
    display:none;
}
li:hover img:last-of-type {
    display:inline;
}

Answer 2

你可能正在寻找这个。

#li1:hover #img1 {
    content: url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png');
}

FIDDLE

Answer 3

好的是有一个修复这个小错误，在悬停时元素变小，文本向左移动＆lt; - ＆gt;右。

只需用这个

替换你的hrml

<li><!--
--><img src='http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png' /><!--
--><img src='http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png' />Hello</li><!--
-->

当你使用内联元素如li span a等时，浏览器会在它们之间放置一些空白区域。上面显示的是：）

Answer 4

FiddleLink

使用以下代码

#li1:hover #img1{
content: url('images.jpg');
}

由于