как стиль nav bar hover state

Я пытаюсь изменить состояние наведения навигационной панели. Так, например, я хочу, чтобы «menu1» выделялся разным цветом и т. Д., Когда я наводил курсор на «menu1». Очень ценю помощь!как стиль nav bar hover state

<div class='header'> 
     <nav class="navbar navbar-fixed-top navbar-inverse" style= "background-color: <%= mobile_device? ? 'rgba(33, 181, 250,1);' : 'rgba(33, 181, 250,.68);'%> " > 
      <div class="col-md-10 col-md-offset-1"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="/" style = "padding-top: 0px; height: 60px;"><%=image_tag("white_text_new_logo.png", height: "60", alt: "Edit Entry")%> <span style="font-size:75%"> </span></a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" style="float:right; "> 
        <ul class="nav navbar-nav"> 
         <% if !current_user %> 


          <li style="padding-left:20px" <%= yield(:active_class) == "borrow" ? "class= \"active\"".html_safe : "" %> > 
           <a href="/borrow">Borrow</a> 
          </li> 
          <li style="padding-left:20px" <%= yield(:active_class) == "lend" ? "class= \"active\"".html_safe : "" %> > 
           <a href="/listings">Lend</a> 
          </li> 
          <li style="padding-left:20px" <%= yield(:active_class) == "faq" ? "class= \"active\"".html_safe : "" %> > 
           <a href="/faq"> FAQ</a>

источник

2015-07-24 user2277916

«стиль нав панель состояние парения» .. .что это значит? По крайней мере, создайте демо в JSfiddle.net и извлеките этот встроенный CSS в нужную таблицу стилей. –

Привет, только уточнил мой вопрос ... спасибо – user2277916

К сожалению, это не намного яснее ... Сделайте демо, возможно, используя JSFiddle.net с вашим фактическим кодом (вычеркните встроенный CSS в раздел стилей). Какой ': hover' CSS вы пробовали? –

Если menu1 является class, вы можете использовать этот CSS:

.menu1:hover { 
    /* The CSS, for example: 
    background-color: red; 
    */ 
}

:hover является примером псевдо-класса. Другие примеры: :first-child, который выбирает первый элемент своего типа внутри элемента и :not(selector), в котором указано исключение. Элемент имеет только свойства, если он также зависает, или первый ребенок.

Вы не можете использовать псевдо-классы внутри style атрибутов, но вы можете написать в <style> теги положить его в <head>, как это:

<style> 
    .menu1:hover { 
     /* The CSS properties, for example: 
     background-color: red; 
     */ 
    } 
</style>

источник

2015-07-24 12:45:53 LarsW

как стиль nav bar hover state

ответ

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