html - 如何让 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

previous sibling 似乎没有任何 sibling 选择器。

W3 定义adjacent siblings一些浏览器支持似乎可用于 general siblings -- 但是，两者都适用于以下 sibling 。

因此，我认为将 :hover 设置为 div 会更容易完成。

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

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