html - 悬停效果不起作用，甚至为它编写的样式是否正确？

Question

我正在研究简单的设计，但我面临的问题是当我悬停在数字 block 上时，即 1,2 等我的悬停效果不起作用。 我想悬停在 li 上，将整个浅绿色的文本数字变成白色，为它编写的样式是正确的。我不知道到底哪里出了问题..

html

<ul class="results">
    <li>
        <span class="number">1</span>
        <a href="#" target="_blank" class="listitem">
            <p class="title">Lorem</p>
            <p class="desc">Lorem lfdfdfdfdfdsfdfdfdf</p>
        </a>
    </li>
</ul>

CSS

.results {
    margin:25px 26px;
}

.results li {
    position:relative;
    overflow:hidden;
    background:#f6f6f6;
    margin-bottom:10px;
    list-style:none;
    _width:100%;
}

.results li .number {
    height:90px;
    line-height:90px;
    width:90px;
    font-size:50px;
    color:#a0daca;
    text-align:center;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-45px;
    display:block;
}

.results li a {
    display:block;
    cursor:pointer;
    word-wrap:break-word;
    overflow:hidden;
    text-decoration:none;
    padding:26px 101px 26px 89px;
    position:relative;
}

.results li a .desc {
    display:inline;
    word-wrap:break-word;
    font-size:14px;
    color:#999;
}

.results li a .title {
    font-size:18px;
    color:#666;
    word-wrap:break-word;
    padding-bottom:8px;
    font-family:Montserrat-Regular;
    font-weight:400;
}

#footer {
    height:46px;
    line-height:46px;
    overflow:hidden;
    text-align:center;
    font-size:12px;
    background:#a0daca;
    padding:20px 0;
}

#footer a {
    font-size:12px;
    text-decoration:none;
    color:#fff;
}

.results li:hover .number {
    color:#fff;
}

.results li:hover .listitem {
    background:url(<tag:image_path/>/800017317/arrowhover.png) scroll 98% center no-repeat #a0daca;
}

.results li:hover .title,.results li:hover .desc {
    color:#fff;
}

请我帮忙完成它。这是 js fiddle link

Answer 1

只需将 z-index: 1 和 pointer-events: none 添加到 .results li .number

.results li .number {
    z-index: 1;
    pointer-events: none;  /* works in modern browsers */
    /* other styles */
}

Working Fiddle

或

简单的解决方案是将鼠标悬停时的图像应用到 li 元素而不是 a 元素。

Working Fiddle

您添加到 a 元素的图像在悬停时覆盖了 span 元素。