Question

我刚开始学习CSS3和HTML5，现在我正试图让我的跨文本转换成另一种颜色，当鼠标悬停在.link div上时，使用以下代码。由于某种原因，它无法正常工作，我已经尝试了几项工作，但到目前为止还没有运气。

有人可以帮我解决问题或指出正确的方向吗？

谢谢！

-

HTML

<div id="celebrity-list">
    <header>
        <h2>Celebrities</h2>
    </header>

    <div id="a">
        <span class="letter">A.</span>
        <div class="links">

        </div>
    </div>
</div>

CSS

#celebrity-list > div span.letter{
    position: relative;
    font: 22px Arial;
    color: #3a3a3a;
    -webkit-transition: color .3s ease-out;  
    -moz-transition: color .3s ease-out;  
    -o-transition: color .3s ease-out;  
    -ms-transition: color .3s ease-out;  
    transition: color .3s ease-out; 
}

#celebrity-list > div .links:hover #celebrity-list > div span.letter{
    color: #b43838;
}

#celebrity-list > div .links{
    position: relative;
    width: 190px;
    height: 342px;
    background: #f2f2f2;
    -webkit-transition: border .3s ease-out;  
    -moz-transition: border .3s ease-out;  
    -o-transition: border .3s ease-out;  
    -ms-transition: border .3s ease-out;  
    transition: border .3s ease-out; 
}

Answer 1

首先，您的CSS选择器不正确。 x> y选择器仅选择直接子项。 span.letter和div.links都不是＃celebrity-list的直接子项，因此这些选择器不会选择它们。 “＆gt;”在这种情况下可能会被删除。接下来，ID应该始终是唯一的。

这根本不起作用：

#celebrity-list > div .links:hover #celebrity-list > div span.letter{
    color: #b43838;
}

你试图选择span.letter，作为div的孩子，作为＃celebrity-list的直接孩子，作为.links的孩子：hover，作为div的孩子，作为#celebrity的直接孩子-list。

如果你想更改span.links文本颜色，你应该把这个元素放在 div＃链接之后，然后按如下方式选择它：

div.links:hover + span.letter { /* your CSS */ }

另一种选择是将span.letter放在div.links中（作为直接子）并使用以下选择器：

div.links:hover > span.letter { /* your CSS */ }

如果您真的想在HTML中的div.links之前留下span.letter，您应该使用javascript来完成想要的结果。

Answer 2

这是因为div.links是span.letter

的兄弟

您的选择器必须是您可能想要应用样式的标记的父级。

跨度文本在悬停时不会更改

2 个答案: