Криво работает Hover

Question

Криво работает Hover

Рейтинг: 1Ответов: 1Опубликовано: 11.12.2014

Такой вопрос: при такой верстке на бутстрапе ховер отрабатывается криво (подсвечивается только последний пункт). Тут работает нормально(jsfiddle.net)

.kat_list li {
  padding-top: 5px;
  padding-left: 5px;
  height: 40px;
  border-bottom: 1px solid #d9d9d9;
  cursor: pointer;
  display: block;
  width: 100%;
  /*background: #269abc;*/
}

.kat_list li a {
  color: #828282;
}

.kat_list li:hover a {
  color: #ff6600;
}

.kat_list {
  padding-left: 0px;
  text-align: left;
  /*list-style: none;*/
}

<div class="col-xs-2">
  <h2>Категории</h2>
  <ul class="kat_list">
    <li><a href="#">Вид техники</a></li>
    <li><a href="#">Вид техники</a></li>
    <li><a href="#">Вид техники</a></li>
  </ul>
</div>

До кучи, если панель разработчика открыта, все работает, как и должно. Если кто сталкивался, поделитесь опытом, заранее спасибо.

css html hover

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

А почему hover на li? Т.е. выходит, что Вы наводите справа от текста (видно на примере) и у вас засвечивается hover, но при этом по клику ничего не произойдет.

Если не хотите давать стили непосредственно на a:hover, тогда сделайте так:

<li><a><span>text</span></a></li>

И стили выдавайте на span, это будет более правильное решение.

Криво работает Hover

Ответы