li and a: hover css

Question

Я хочу сделать простой список, но у меня есть проблемы. Когда я помещаю текст в элемент li, я хочу установить ширину 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

Для проблемы ширины не устанавливайте ширину для 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; 
}

Answer 2

Почему бы вам просто не использовать Firebug для чтения их CSS?

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

должен позаботиться о вашем вопросе.

Answer 3

Вот рабочий jsfiddle, который (я считаю) соответствует тому, что вы пытаетесь сделать.Не обращайте внимания на цвета, они только для иллюстрации.

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

edit: обновлено, чтобы удалить inline-block, настройка width:auto.Я увеличил высоту до LI, но могут быть более эффективные способы предотвращения их перекрытия.

Answer 4

Применяется к элементу a при наведении курсора на li.

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

Применяется к элементу li при наведении на него указателя.

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