0

我刚刚开始学习 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; 
}
4

2 回答 2

0

首先，您的 CSS 选择器不正确。x > y 选择器只选择直接子代。span.letter 和 div.links 都不是 #celebrity-list 的直接子级，因此这些选择器不会选择它们。在这种情况下，“>”可能会被删除。除此之外，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 #links 之后并按如下方式选择它：

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

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

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

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

于 2013-08-19T01:54:37.963 回答
0

这是因为 div.links 是 span.letter 的兄弟

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

于 2013-08-19T02:01:34.367 回答