Question

我正在进行简单的设计，但我遇到的问题是当我在数字块上徘徊，即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元素。

Answer 2

您需要将.numbers块放在标记内 http://jsfiddle.net/222cf6yv/7/

<a href="#" target="_blank" class="listitem"><span class="number">1</span>

但我认为核心原因是因为下面的行不是一个有效的CSS，所以无论你在下面放置什么CSS都没有执行：

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

Answer 3

结果层重叠，是的Z-index是问题。

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

3 个答案:

或