Question

我在绝对定位的div中有一个无序列表。我试图对单个li元素进行悬停效果，它根本就不起作用。当光标比li的文本高出许多时，光标只会触发悬停效果。

这是响应式设计布局中最宽的部分，悬停工作正常，直到最宽的状态，因为设计问题我必须将包含div切换到绝对位置并且我已经运行了很多实验并且它总是在没有绝对的情况下工作定位，但我无法将容器正确地放置在最终状态，并将其从流中移除。

这个让我疯了，我哪里出错？

.secondary_header{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    position:absolute;
    width:700px;
    border-bottom-right-radius:60px;
    height:60px;
}   

.secondary_header ul{
    margin:0 auto;
    width:100%;
}

.secondary_header ul li{
    background-image:url(../images/audio_icon.png);
    background-repeat:no-repeat;
    background-position:0px;
    padding-left:50px;
    float:left;
    list-style:none;
    line-height:60px;
    padding-left:50px;
    height:60px;

}

.secondary_header ul li:hover{
   color:#09F;
}

Answer 1

您提供的信息不够。如果以下代码符合您的要求，那么请高兴或者......详细说明您的要求，以便我可以有个好主意。

.secondary_header{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    position:absolute;
    width:700px;
    border-bottom-right-radius:60px;
    height:60px;
}   

.secondary_header ul{
    margin:0;
    padding:0px;
    width:100%;
}

.secondary_header ul li{
    background-image:url(../images/audio_icon.png);
    background-repeat:no-repeat;
    background-position:0px;
    padding:0 15px;
    float:left;
    list-style:none;
    line-height:60px;
    height:60px;
    cursor:pointer;

}

.secondary_header ul li:hover{
   color:#09F;
}

如何在绝对定位的容器中使UL LI正确悬停？

1 个答案: