Question

我想制作一个简单的列表，但有一些问题。当我在li元素中添加一些tekst时，我想设置li宽度与li文本相同... 当我将鼠标悬停在li链接上时，我想要更改完整的li元素背景颜色，而不仅仅是A元素。

这是我的代码..

#mid_left ul{ 
width:180px;

list-style:none; 
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px; 
}

#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;


 }

#mid_left li a:hover{
background-color:blue;    
}

我尝试做的示例是在页面..（见页脚） http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/

Answer 1

将鼠标悬停在a上时适用于li元素。

#mid_left li:hover a{
    background-color:blue;    
}

将鼠标悬停在li元素上时适用。{/ p>

#mid_left li:hover{
    background-color:blue;   
    width:200px;
}

Answer 2

为什么不用Firebug来阅读他们的CSS？

#mid_left li:hover{
  background-color:blue;    
}

应该处理你的问题。

Answer 3

这是一个工作的jsfiddle（我相信）适合你想要做的事情。不要介意颜色，它们仅用于说明。

http://jsfiddle.net/qwdd8/1/

编辑：更新以删除内联块，设置width:auto。我强迫一个高度到LI，但可能有更好的方法来防止它们重叠。

Answer 4

对于宽度问题，请不要将宽度设置为ul元素，因此请更改：

#mid_left ul{ 
width:180px;

list-style:none; 
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px; 
}

到

#mid_left ul{ 
list-style:none; 
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px; 
}

李和a：悬停css

4 个答案: