代码之家 › 专栏 › 技术社区 › ChrisLively

CSS悬停如何影响其他标记?

css html

ChrisLively · 技术社区 · 16 年前

假设我有以下几点:

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

当图像悬停在跨度上时,是否可以替换图像(也可以通过CSS)?如果是,我怎么能做到?

5 回复 | 直到 7 年前

Jonathan Lonowski 16 年前

似乎没有任何同级选择器用于 以前的 兄弟姐妹。

W3定义 adjacent siblings 一些浏览器支持似乎可以用于 general siblings --但是,两者都是为了 下列的 兄弟姐妹。

所以,我认为你会发现这更容易完成 :hover 设置到div。

而且,我从来没有听说过CSS能够改变 src 属性。我唯一能想到的可以通过CSS更改图像的工作是 SRC 透明的图像和改变 background-image .

<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>

Peter Hilton 16 年前

更简单的方法是移除 img 元素并使图像成为 span . 然后您可以在两个CSS规则中控制背景图像:

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

然后,您只需要一些CSS来定位背景图像,并可能添加足够的填充,使背景图像不会重叠任何文本。

willoller 16 年前

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

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

那么你的CSS应该是:

.myLabel span:hover img { ... }

仅供参考<A>标记的作用是:在IE6中悬停(但它还是旧的)

Arve Systad 16 年前

不,你不能代替 src属性的值。

乔纳森·拉诺夫斯基说: 而且,我从来没有听说过CSS能够改变SRC属性。我唯一能想到的通过CSS改变图像的方法是使用SRC透明图像和改变背景图像。

记住img元素的含义。它应该将图像显示为内容,而不是表示。如果在src属性中放置透明的.gif或其他内容,也可以从页面中删除内容。

同样的情况也适用于使用不同的CSS悬停技术来更改图像,只要在src属性中没有实际的图像,就仍然可以删除内容。另外,在悬停SPAN元素时,只要文档按原样标记,就无法更改图像。

所以,这是一个典型的JavaScript作业。

Evan Teran 16 年前

一种方法是让一个图像文件包含多个图像,并使用CSS规则更改要显示的文件中的偏移量。

见: http://www.alistapart.com/articles/sprites/

特别是“悬停”部分。

它们在这里提供了一个功能示例:

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

编辑:我刚意识到你要求更改图像,然后将鼠标悬停在跨度不是图像本身。为此,我相信您需要使用JavaScript。