Question

假设我有以下内容：

<style>
    .myLabel {
      color: blue;
    }
    .myLabel:hover {
      color:red;
    }
</style>
<div>
    <img src='myimage.png' />
    <span class='myLabel'>Image Label</span>
</div>

当它们悬停在跨度上时是否可以替换图像（也可以通过css）？如果是这样，我怎么能这样做？

Answer 1

之前的 兄弟姐妹似乎没有任何兄弟选择器。

W3定义了adjacent siblings，某些浏览器支持似乎可用于general siblings - 但两者都适用于以下兄弟姐妹

所以，我认为你会发现将:hover设置为div更容易实现。

而且，我从未听说过CSS能够改变src属性。关于我认为可能通过CSS改变图像的唯一方法是让src成为透明图像并改变background-image。< / p>

<style>
    .myLabel img { background-image: url('...'); }
    .myLabel span { color: blue; }
    .myLabel:hover img { background-image: url('...'); }
    .myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
    <img src='transparent.png' />
    <span>Image Label</span>
</div>

Answer 2

更简单的方法是删除img元素并将图片作为span上的背景图片。然后，您可以在两个CSS规则中控制背景图像：

.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }

然后你只需要一些CSS来定位背景图像，并且可能为背景图像添加足够的填充以不与任何文本重叠。

Answer 3

您也可以将图像放在范围内：

<div class='myLabel'>
    <span>
      <img src='transparent.png' />
      Image Label
    </span>
</div>

然后你的css将是：

.myLabel span:hover img { ... }

仅供参考＆lt; a＆gt;标签适用于：在IE6中悬停（但无论如何都是旧的）

Answer 4

不，你不能以任何方式替换 src-attribute的值。

Jonathan Lanowski说：而且，我从未听说过CSS能够改变src属性。关于我认为可能通过CSS改变图像的唯一方法是让src成为透明图像并改变背景图像。

牢记IMG元素的含义。它应该将图像显示为内容，而不是显示。如果在src-attribute中放置透明的.gif或其他内容，则还会从页面中删除内容。

这同样适用于使用不同的CSS悬停技术来更改图像，只要您在src-attribute中没有实际图像，您仍然会删除内容。此外，只要您的文档按照原样标记，您就无法在悬停span-element时更改图像。

那么，这是一个典型的Javascript工作。

Answer 5

一种技术是让单个图像文件中包含多个图像，并使用css规则更改要显示的文件中的偏移量。

请参阅：http://www.alistapart.com/articles/sprites/

特别是“悬停”部分。

他们在这里提供了一个功能性的例子：

http://www.alistapart.com/d/sprites/ala-image3.html

编辑：我刚刚意识到您要求更改图像，然后将鼠标悬停在范围上而不是图像本身。要做到这一点，我相信你需要使用javascript。

如何让CSS悬停影响不同的标签？

5 个答案: