Изменение цвета фона при наведении не работает

У меня возникла проблема с событием hover-события CSS. Я создал страницу с панелью навигации наверху. По соображениям совместимости мне пришлось отойти от навигатора и изменить его на простой div. (Нав не известно, в IE8, но он все еще должен работать там.)Изменение цвета фона при наведении не работает

<div class="nav"> 
<ul> 
    <li> <a> Something </a> 
     <ul> 
     .... 
     </ul> 
    </li> 
    .... 
</ul> 
</div>

Это привело к тому что парения на моей навигационной панели больше не работает. Но это не так, что ничего не работает, только первая из следующих строк больше не работает. Фон просто не меняется.

.nav ul li:hover { background: #BFBFBF; } - not working 
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine 
.nav ul li:hover > ul { display:block; } - working perfect as well 
.nav ul { 
    background: #404040; 
    list-style:none; 
    padding:0 20px; 
    margin: 0; 
    height: 30px; 
    text-align:left; 
    display:block; 
}

Я проверил в основном все, что я знаю, подозреваемое или нашли, что может быть источником моего вопроса, но я был еще не в состоянии получить его обратно работать. Я пробовал использовать фоновый цвет вместо фона, без успеха. Я хочу сделать это, не используя ничего, кроме HTML и CSS, что должно быть возможно, поскольку оно сработало, когда я все еще использовал навигационный элемент.

Я ноб, чтобы css, может быть, я пропустил некоторые очень простые детали.

Заранее спасибо.

источник

2015-08-13 Lenwe

Можете ли вы поместить свой код на скрипке? – casraf

, пожалуйста, предоставьте свой код в демо или jsfiddle..thanx –

Какой еще вид CSS у вас есть для вас? .nav ul li'? Может быть, у него нет никаких измерений? – putvande

Вместо того, чтобы изменять содержимое нав бар, попробуйте изменить анимацию вещи, которые вы указывая на, я имею в виду, что а не наведя <li> компонент просто сделать текст в нем витает

.nav a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding-left: 15px; 
    border-bottom: 1px solid #888; 
    transition: .2s background-color; 
} 

.nav a:hover { 
    background-color: #005f5f; 
} 
.nav a.active { 
    background-color: #aaa; 
    color: #444; 
    cursor: default; 
}

Попробуйте определения т он <a> элемент и зависание его как целого <li> не будет парить с несколькими перекрывающимися форматами CSS

источник

2015-08-13 08:41:23

Это прекрасно работает и выглядит лучше, чем все, что я достиг до сих пор, благодаря «переходу», спасибо! – Lenwe

См. Я создал что-то в html. И ваш код работает. Его хорошо, если вы можете вставить ваш HTML

<head runat="server"> 
<title></title> 
<style type="text/css"> 
    .nav ul li:hover { 
     background: #BFBFBF; 
    } 

     .nav ul li:hover > a { 
      color: #FFFFFF; 
     } 

     .nav ul li:hover > ul { 
      display: block; 
     } 
</style>

 <nav class="nav"> 
      <ul> 
       <li> 
        <a>Li 1</a> 
       </li> 
       <li> 
        <ul> 
         <li>Li 2 
         </li> 
        </ul> 
       </li> 
       <li>Li 3 
       </li> 
      </ul> 
     </nav>

источник

2015-08-13 08:26:34 Urvi

Я не могу использовать' nav', потому что он должен работать и в IE8. Было это решение, потому что я смотрел только страницу в более высоких IE и Chrome. Затем я использовал IE8 после того, как понял, что не смогу использовать 'nav'. – Lenwe

Изменение цвета фона при наведении не работает

ответ

Смежные вопросы