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

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定义相邻的兄弟姐妹和一些浏览器的支持,似乎可用于一般的兄弟姐妹 -但是,无论是下面的兄弟(一个或多个).

所以,我认为你会发现: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>