2

我很好奇为什么这不起作用？我的猜测是，无论您的目标是什么元素，您都必须通过其父元素。我是对的还是有窍门？（没有jQuery）

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

HTML

这不起作用

三角枪 

    <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; }
4

4 回答 4

1

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

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

应该：

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

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

于 2013-07-17T01:47:51.110 回答
1

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

语法（AFAIK）：
“~”表示选择下一个对象
“>”表示在下面的一步中选择子对象

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

CMIIW

于 2013-07-17T02:08:40.950 回答
0

因为.not-working img:hover a意味着您的锚标签位于不正确<a>的标签内。img在第二种情况下是正确的，这就是它起作用的原因。

于 2013-07-17T01:48:11.210 回答
0

它的工作：

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

于 2013-07-17T01:51:04.907 回答