如何将鼠标悬停在图像上并制作和更改链接颜色？

Question

我很好奇为什么这样做会有效？我的猜测是，无论你的目标是什么元素，你必须通过它的父母。我是对的还是有诀窍？ （没有jquery）

查看小提琴：http://jsfiddle.net/eMw5C/

HTML
        

这不起作用

                                  枪神Trigun         

    <h1>This Works</h1>
    <div class="yes-working">
        <img src="https://i158.photobucket.com/albums/t109/hp_arianepotter/trigun-1.png" />
        <a href="javascript:void(0);">Trigun</a>
    </div>

    /* This doesn't work */
    .not-working img { width: 10em; clear: both; }
    .not-working img:hover a { color: red; }
    .not-working a { color: black; }
    .not-working a:hover { color: red; }

    /* This works */
    .yes-working img { width: 10em; clear: both; }
    .yes-working:hover a { color: red; }
    .yes-working a { color: black; }
    .yes-working a:hover { color: red; }

Answer 1

在非工作示例中，锚标记不是img标记的子标记。

.not-working img:hover a { color: red; }

应该是：

.not-working img:hover ~ a { color: red; }

在这里工作：http://jsfiddle.net/eMw5C/1/

Answer 2

.not-working类上有无效的路径选择器..试试这个：
.not-working img:hover ~ a { color: red; }

语法（AFAIK）：
“〜”表示选择下一个对象
“＆gt;” 中意味着选择儿童对象在一步骤水平下面

但我认为你不能重新选择父对象

CMIIW

Answer 3

因为.not-working img:hover a表示您的锚标记<a>位于img标记内，而不是真的。在第二种情况下确实如此，这就是它起作用的原因。

Answer 4

它的工作：

.not-working img { width: 10em; clear: both; }
.not-working:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }

http://jsfiddle.net/aldiunanto/eMw5C/2/