CSS - utilisation de plusieurs classes pour l'effet de survol

J'essaie d'ajouter un mini-triangle à l'état stationnaire de la barre de navigation.CSS - utilisation de plusieurs classes pour l'effet de survol

HTML:

 <div id="menu_bars"> 
      <div id="main_bar"> 
       <ul> 
        <li class="maintabs maintabs_tri"><a href="#">Over</a></li> 
<li class="maintabs maintabs_tri"><a href="#">Collar</a></li> 
<li class="maintabs maintabs_tri"><a href="#">Bod</a></li> 
       </ul>   
      </div> 

      <div id="css_arrow" class="maintabs_tri"><a href="#"></a> 
      </div> 
     </div>

Le 'main_bar' div crée un menu de navigation horizontale. L'ID div 'css_arrow' est utilisé pour créer une flèche qui apparaîtra à l'état Hover. Je les joue toutes une classe appelée 'maintabs_tri' qui inclut le triangle et le menu de navigation 'main_tab', de sorte que lorsque l'état hover devient actif, le triangle apparaît sur la barre de navigation.

CSS:

/* START OF MAIN BAR */ 
#main_bar ul { 
    float: left; 
    width: 630px; 
    height: 48px; 
} 

.maintabs { 
    display: inline-block; 
    width: 25%; 
    list-style-type: none; 
    background: rgba(237,237,237,1); 
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(237,237,237,1)); 
    background: -webkit-gradient(linear, top, bottom, from(rgba(255,255,255,1)), to(rgba(237,237,237,1))); 
    -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2); 
    box-shadow: 1px 2px 2px rgba(0,0,0,0.2); 
    -webkit-transition-property: 
} 

.maintabs:first-child { 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

.maintabs:last-child { 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-topright: 6px; 
    -moz-border-radius-bottomright: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-right-radius: 6px;   
} 

.maintabs a { 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 14px; 
    text-shadow: 0px 1px 2px rgba(0,0,0,0.3); 
    padding: 18px 0px; 
} 

.maintabs ul { 
    display: none; 
    list-style-type: none; 
} 

.maintabs ul li a { 
    text-decoration: none; 
} 
/* END OF MAIN BAR */ 



/* TRIANGLE ------ for testing, to be used with hover later */ 
#css_arrow { 
    border-color: transparent transparent rgba(111,46,11,0.0) transparent; 
    border-style: solid; 
    border-width: 8px; 
    height: 0; 
    width: 0; 
    position: absolute; 
    top: 34px; 
    left: 78px; 
} 

.maintabs_tri a:hover { 
    border-color: transparent transparent rgba(111,46,11,1) transparent; 
}

pourrait partager quelqu'un pourquoi cela ne fonctionne pas? Je ne peux pas comprendre pour la vie de moi ...

Source

2011-01-31 Kayote

Ajout à .maintabs_tri a:hover cela: border-bottom: 3px solid #000 le corrige dans Chrome. Le problème était qu'il n'y avait pas border-width ou border-style défini.

Source

2011-01-31 23:45:23 thirtydot

@Kayote: Ma réponse a-t-elle fonctionné pour vous? – thirtydot

Thirtydot, non, il n'a pas. Le problème est que l'effet de survol brise complètement la barre de menu. Je repositionne cette question dans de meilleurs mots et vous enverra le lien. Merci beaucoup d'avoir pris le temps de le faire. Meilleur, – Kayote

thirtydot, voici le lien vers le nouveau poste: http://stackoverflow.com/questions/4870912/css-adding-another-elements-on-hover-state – Kayote

CSS - utilisation de plusieurs classes pour l'effet de survol

Répondre

Questions connexes