html - 如何在悬停链接时将文本设为深灰色然后变为橙色？

Question

我想让我的文本为深灰色 (#232323)，然后在悬停时将其更改为带有下划线的橙色 (#f66511)。

看看我的 jsfiddle，我的代码中缺少什么:

http://jsfiddle.net/huskydawgs/brwb2r7a/9/

这是我的 HTML:

    <div id="wrapper-landing">
    <div id="wrapper-icons">
        <div class="icons_row">
            <div class="icons_cell1 greyBoxOnHover">
                <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Gala" height="140" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" style="display:block; margin:0 auto;" width="140" /> </a>
                <p class="video-title rtecenter">
                    <a href="http://en.wikipedia.org/wiki/Apple">Wasington Apples:<br />Gala</a></p>
            </div>

</div>

CSS:

#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

.rtecenter {
    text-align: center;
}

#wrapper-icons {
    position:relative;
    width:100%;
    border: none;
    margin: 35px 0 0 0;
}

.icons_row {
    height:100%;
    white-space:nowrap;
    }

.icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4 {
    height:100%;
    width:25%;
    display:inline-block;
    white-space:normal;
    padding-top:15px;
    }

    .greyBoxOnHover:hover {
    background-color: #e2e3e4;
}

#wrapper-landing p.video-title {
    color: #232323;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
}

#wrapper-landing p.video-title a {
    text-decoration: none;
}

#wrapper-landing p.video-title hover {
    text-decoration: underline;
    color: #f66511;
}

Answer 1

你的 hover 写成 #wrapper-landing p.video-title hover 而它应该是 #wrapper-landing p.video-title a:hover

您缺少 : 和 a 选择器。