Rechercher : dans
Par :

HTML - CSS display et :hover

Dernière réponse le 15 nov 2008 à 00:03:33 titouflout, le 14 nov 2008 à 15:59:30 
 Signaler ce message aux modérateurs

Bonjour,

Bien que je ne sois pas mauvais en XHTML/CSS, je suis tombé sur un probleme...

Je souhaite créer un menu. Composé de plusieurs partie (plutôt évident..). Ces parties, une fois la souris placée dessus, seront censée afficher le titre de cette partie.

En gros, on a:

HTML:
<div class="la partie en question"></div>
<h1>le titre de la partie</h1>

CSS:
.la partie en question:hover
{
display: C'est LA que ça coince, j'aimerais que le display sois actif sur le h1 et non pas sur la première div...
}

Comment faire? Dois-je utiliser le javascript ? ..avec lequel je n'y connais rien d'ailleurs.
J'aimerais (si possible) trouver une solution dans mes cordes (XHTML/CSS)

Merci de m'aider.

Configuration: Windows XP
Firefox 3.0.3
XHTML 1.0 Strict

Meilleures réponses pour « HTML CSS display et :hover » dans :
Différence entre display:none et visibility:hidden Voir Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

1

saly_inf, le 14 nov 2008 à 16:30:52

Salut
pour afficher le titre de chaque partie il suffit d'ajouter l'attribut ''title"

   exemple:
     <h1 title="la premiére partie">la partie I<h2> 



@+..
cdlt *******W.Y.S.I.W.Y.G *******
 "What Yu See Is What You Get"

Répondre à saly_inf

2

titouflout, le 14 nov 2008 à 16:36:42

Humm.. en fait non, je ne souhaite pas du tout créer une infobulle..
Je souhaite afficher une balise de type <h1>

C'est là que résite la difficulté

Répondre à titouflout

3

Chupachups23, le 14 nov 2008 à 16:37:58

Tu peu aussi faire cela :

nomdetapartie h1 :hover
{
display:
}

En gros , ca veut dire : Les h1 de nomdetapartie .

Répondre à Chupachups23

4

titouflout, le 14 nov 2008 à 16:47:24

Bon, on va carrément lacher quelques lignes de code...

HTML :

<div class="first"></div> <--! Voici la balise dans la quelle passe la souris -->
<h5 class="test">exemple</h5> <--! Cette balise est celle qui s'affiche lors du passage de la souris sur la div-->

CSS :

h5
{
color: white;
display: none;
}

.test .first:hover
{
display: inline;
}


Voilà comment j'applique ton conseil Chupachups23, mais ça ne marche pas.. le texte reste caché

Répondre à titouflout

5

Chupachups23, le 14 nov 2008 à 17:31:44

Si j'ai bien compris , tu voudrais quand par exemple tu pointe la ou il est censé avoir le menu , les éléments apparaissent ?J'aurais bien une solution assez simple mais pas facile a intégrer dans un site , je m'explique un menu de la même couleur que ton fond et quand ta souris pointe sur le div , ça modifie la couleur d'arrière plan.
Html

<div id="test"><ul id="titre"><li>
<font>Admin</font>
</li></ul> 
<ul>
<li><a href="index.php">Index</a></li>
</ul>
</div>

CSS
#test:hover
{
background-color: blue;
}

ul a
{
   color: white;
} 

Répondre à Chupachups23

6

titouflout, le 14 nov 2008 à 17:37:06

C'est domage l'idée était bonne mais en fait, si ma souris passe par hasard sur les liens, ça ne le fait pas, tu comprends? Je suis à l'heure actuelle en train de voir si je peux trouver un éditeurs html/css/javascript de visualisation pour créer ce que je souhaite assez simplement et obtenir un script personnalisé...

Répondre à titouflout

7

Chupachups23, le 14 nov 2008 à 18:09:33

Ba je sais pas si tu trouvera en java script une fonction pour être sur que la personne a bien fait exprès mais tu pourrais aussi essayer avec opacity mais c'est le même système qu'avec le fond. Si la souris n'est pas dessus l'opacité est a 0 et si tu passe la souris sur le bloc , le texte apparait (opacité est a 1).

Répondre à Chupachups23

8

Marco la baraque, le 14 nov 2008 à 23:07:59
  • +1

Bonsoir,
En javascript c'est très facile de faire ce genre de chose (ce langage sert d'ailleurs à faire des modifications dynamiques de ta page HTML).
Je te conseille de t'orienter vers une telle solution.

En terme d'apprentissage si tu connais le HTML et le CSS tu risques de tout piger rapidement (c'est principalement de la modification d'arbre DOM en récupérant les éléments soit par id, soit par class, en leur ajoutant des fils, en modifiant les propriétés css...).

L'inconvénient, comme toujours, du javascript, c'est que si l'utilisateur a désactivé le javascript dans son navigateur, et bien ça ne fera rien du tout.

Cordialement, rtfm and jfgi

Répondre à Marco la baraque

9

 titouflout, le 15 nov 2008 à 00:03:33

D'accord je vois... merci quand même

Répondre à titouflout
Collection CommentÇaMarche.net