CSS Hover не будет работать на панели навигации

Эй, ребята, это мой второй вопрос до сих пор на веб-сайте, который я перепроектирую для своего босса. Я пытаюсь использовать его, если пользователь наводит курсор на «4-цветную офсетную печать», фон идентификатора div изменится на другой фоновый цвет. (Пример синий). Я попытался добавить # 4_color_offset_printing: наведите указатель мыши, чтобы увидеть, просто ли это изменит цвет фона. Обычно это работает, но на этой панели навигации кажется, что он не работает. Сейчас фоновый фон по умолчанию зеленый. Я бы хотел, чтобы он посинел, когда я нависаю над ним. Я пытаюсь применить этот эффект к каждой ссылке, но если бы я мог получить одну работу, я мог бы выяснить остальное.CSS Hover не будет работать на панели навигации

Более старый стиль панели навигации - серый с синим воздействием на зависание. Последний разработчик, создавший сайт, решил использовать встроенный CSS. Я не поклонник встроенного, но даже если я попытаюсь просто скопировать и вставить его встроенный код в main.css, это не повлияет. Я понятия не имею, почему это произойдет. Если у кого-нибудь есть какие-то советы, это было бы здорово!

Вот мой Demo

<style type="text/css"></style></head> 

<body class="desktop webkit webkit_525"> 
    <div id="header"> 
     <div class="content_width rel"> 
      <a href="./Welcome to our site!_files/Welcome to our site!.html"> 
       <div id="header_logo"></div> 
      </a>     

      <ul id="top_nav"> 
       <li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li> 
       <li><a href="http://www.offsetprinting.com/account/contact">Contact</a></li> 
       <li><a href="https://secure.offsetprinting.com/account/estimate">Estimates</a></li> 
       <li><a href="http://www.offsetprinting.com/helpcenter">Help Center</a></li> 
       <li><a href="https://secure.offsetprinting.com/services/samples">Samples</a></li> 
       <li><a href="https://secure.offsetprinting.com/account/summary">Shopping Cart</a></li> 
       <li class="last-child"><a href="https://secure.offsetprinting.com/account/dashboard">My Account</a></li> 
      </ul> 

          <ul id="loginbar" class="rounded"> 
       <li><a href="https://secure.offsetprinting.com/account/signup">New Account</a></li> 
       <li class="last-child"><a href="https://secure.offsetprinting.com/account/login">Login</a></li> 
      </ul> 

      <div id="header_products"></div>     
          <div id="header_phone">Customer Service: (949) 215-9060</div>    

      <div id="product_search"> 
       <input id="product_ti" class="default" type="text" value="Find A Product"> 
       <input id="product_btn" type="button" value="Search"> 
       <input id="product_default" type="hidden" value="Find A Product"> 
      </div>  
     </div> 
    </div> 

    <div id="nav"> 
     <ul id="nav_links" class="content_width_adjust"> 

      <li id="4_color_offset_printing" style="width:183px; height:44px; background-color:#0C0; border-top: 4px solid #009ad6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li> 

      <li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li> 

      <li id="1-2_color_printing" style="width:164px"><a class="nav_parent" href=""><span>1&amp;2 Color Printing</span></a></li> 

      <li id="4_color_digital_printing" style="width:189px"><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li> 

      <li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li> 

      <li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li> 

     </ul> 
    </div>

источник

2015-04-16 Darius Shojaei

элементы ID не может начинаться с цифры, только классы могут. Удаление 4_ из «4_color_offset_printing», так что у вас есть только идентификатор «color_offset_printing», вы сможете настроить его в CSS.

Если вы действительно не хотите изменить ID, вы можете предназначаться идентификаторы, которые начинаются с числа, как это:

[id='4_color_offset_printing'] { 
background: blue; 
}

Но я бы не рекомендовал использовать это, он не может хорошо работать в все браузеры. Лучше всего делать все правильно и не использовать номера для запуска своих идентификаторов.

источник

2015-04-16 18:09:52 Kyle

Ahh. Вот почему последний разработчик использовал встроенные стили для стилизации номеров с номерами в начале. Он должен этого не знать, и использовал встроенный инструмент для работы. Огромное спасибо. –

Нужно добавить к #nav_links Li а: зависать класс

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

https://jsfiddle.net/akdz7udj/7/

источник

2015-04-16 18:06:58 deebs

CSS Hover не будет работать на панели навигации

ответ

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