28172 sujets

CSS et mise en forme, CSS3

Css a:hover durable

Bonjour,

J'ai fait quelques recherches sur les forums, mais je ne trouve pas de réponse à cette question:

J'ai un menu élaboré en xhtml + css (sans javascript); Lorsque la souris survole un des liens du menu, il change de couleur grâce à a:hover et affiche une div en dessous (qui contient le texte de ce menu).

Comment faire pour que le lien garde cette couleur tant que la souris n'a pas survolé un autre lien du menu ou tant que la souris n'a pas quitté la div du dessous ?

Il doit bien exister une propriété speciale pour ça ??

Merci
Merci, mais je ne cherche pas à modifier la couleur du div du texte du menu...

Actuellement, j'ai un menu horizontal avec 4 titres de colonnes,
Dès que la souris survole un des titres, celui ci change de couleur, et affiche une autre div en dessous, avec du texte.
Et ce que je voudrais faire, c'est que lorsque la souris quitte ce titre et se promène sur la div du dessous, le titre de la colonne conserve la couleur qu'il avait quand la souris le survolait...

En fait je ne compte pas changer la couleur du div par un hover...

Merci quand même pour la réponse !

Si vous avez d'autres idées
re,

un extrait de l'architecture html et des styles a appliquée aiderait grandement a bien "visualisé" le résultat recherché...
Selon l'architecture les possibilité de ciblage de ces élément ou zone parente different.

GC
Re !

Voici ma page menu html

<body> 		



<ul class="niveau1">

      <li class="sousmenu1"><a href="">MENU 1</a> <!-- affiche le MENU 1 -->

      <ul class="niveau1">

		<li> Texte à mettre		</li>

        </ul>


      <li class="sousmenu2"><a href="">Conditions</a><!-- affiche le MENU 2 -->

<ul class="niveau2">

            <li> Texte à mettre </li>

</ul>

      <li class="sousmenu3"><a href="">Réserver</a><!-- affiche le MENU 3 -->

<ul class="niveau3">

            <li>Texte à mettre</li>

</ul>

      <li class="sousmenu4"><a href="">restants</a><!-- affiche le MENU 4 -->

<ul class="niveau4">

            <li> Texte à mettre</li>

</ul>


 												</div>       <!-- Fin de la div MENU -->
</body>



Et voici mon code CSS

/* Style de la div qui accueille le menu */

div#menu ul {

position:fixed !important; /*Pour Mac IE*/

position: relative;

padding-top: 10px;

padding-left: 195px ; 

margin:0px; 

width: 900px; 

text-align:center;
} 

/* Style de tout lien se trouvant dans la div menu */ /* prime tout autre style general */

div#menu a {

opacity:.85;

filter: alpha(opacity=85);

-moz-opacity: 0.85; 

font-family: Impact, Helvetica, Sans serif;

color: gray;

background-color: black;

margin-left: 5px solid red;

font-size: 14px;

font-weight: bold;
} 

div#menu ul li {

position:relative; 

list-style: none; 

float:left; 

}

div#menu ul ul {

position: absolute;

display:none;
}



div#menu li a {

text-decoration: none; 

padding: 10px 0px 10px; 

display:block;

width:200px;

margin-left: 5px red;

}

div#menu li a:hover {                         /* Style des cases de menus au survol de la souris */

text-decoration: none; 

padding: 10px 0px 10px; 

display:block;

width:200px;

color: #4bb1ff;

}

div#menu ul.niveau1 li.sousmenu1:hover ul.niveau1 { /*style du cadre sous le MENU 1 */

display:block; 

opacity:.85;

filter: alpha(opacity=85);

-moz-opacity: 0.85; 

text-align: left; 

background-color: #2c3d5b; 

color: white;

font-size: 14px;

left: 195px; 

width: 780px; 

height: 400px;

overflow: auto;

padding: 10px;
}

div#menu ul.niveau1 li.sousmenu2:hover ul.niveau2 { /*style du cadre sous le MENU 2 */

display:block; 

opacity:.85;

filter: alpha(opacity=85);

-moz-opacity: 0.85; 

text-align: left; 

background-color: #2c3d5b; 

color: white;

font-size: 14px;

left: 195px; 

width: 780px; 

height: 400px;

overflow: auto;

padding: 10px;
}

div#menu ul.niveau1 li.sousmenu3:hover ul.niveau3 { /*style du cadre sous le MENU 3 */

display:block; 

opacity:.85;

filter: alpha(opacity=85);

-moz-opacity: 0.85; 

text-align: left; 

background-color: #2c3d5b; 

color: white;

font-size: 14px;

left: 195px; 

width: 780px; 

height: 400px;

overflow: auto;

padding: 10px;
}

div#menu ul.niveau1 li.sousmenu4:hover ul.niveau4 { /*style du cadre sous le MENU 4 */

display:block; 

opacity:.85;

filter: alpha(opacity=85);

-moz-opacity: 0.85; 

text-align: left; 

background-color: #2c3d5b; 

color: white;

font-size: 14px;

left: 195px; 

width: 780px; 

height: 400px;

overflow: auto;

padding: 10px;

}


Désolé pour la longueur !!

Si vous avez un début de solution... Merci d'avance

@+
Modifié par Robb (09 Jan 2011 - 17:29)
Sujet clos
Aller à