Div hover

Salut, j'essaye de faire changer la couleur de mon arrière plan lorsque je survole celui-ci...

<div class= "xx">La nouvelle vie est complètement différente de l'ancienne...</div>

Pour ce faire, je pensais faire ceci:

.xx{ background-color: #FFFFFF;}
.xx a:hover { background-color: #B0B09F;}

Pas de résultat ... .... Une idée?
Modifié par FranZz (13 Apr 2008 - 01:27)

Yep...


Voilà de l'occupation pour la nuit ...

CSS

div.essai {
width:100px; 
height:100px;
background-color:#FFFFFF
}

div.essai:hover {
width:100px; 
height:100px;
background-color: #B0B09F
}

HTML

<div class="essai" >un texte quiveurien dire</div>

Essayé et approuvé sur Firefox et Safari sous mac ...

Bonne nuit ....

Edit : un peu mieux avec les class... comme ça tu peux attribuer des couleurs différentes à plusieurs div...
Modifié par Velbain (13 Apr 2008 - 01:47)

Hep _

Quand je mets texto ce que tu me donnes, toute ma page pête les plombs...

Quand je fais ceci

div .xx{background-color:#B0B09F}
div .xx :hover {background-color: #FFFFFF}

ça change rien ...

je suis sous safari -

Merci pour la piste de soluce !

Limite si t'as deux minutes, je mets ma page online .....
Modifié par FranZz (13 Apr 2008 - 01:51)

Hop...


Ne mets pas d'espace en "div." et "xx" ni entre "xx" et ":hover"...
Après dans mon exemple j'ai mis un width et height pour bien voir l'arrière plan c'est peut être pour ça que ça te chamboule ta page...

Il te faut ceci :

div.xx {background-color:#B0B09F}
div.xx:hover {background-color: #FFFFFF}

Tsssss ; c'est bon !!!

Un espace et ça foire ... mais bon ...

Dernier truc, tous ces div, même quand y'a pas de lien sont "réactifs", c'est pas un peu zarb ça ?

Sinon bien vu _

Der...




Le speudo-élément ":hover" est applicable sur toutes les balises comme div, a, img, p, ...

Il sert à changer le style CSS dès qu'on survole la balise concernée...


Sur ce .... Je vais dodo... Demain je bosse... (oui oui)

ok, tu tues, merci !

++

Simplement ceci ( w3c validator )

<a href="Untitled-1.html"><div class= "xx">Depuis</div></a>

Une astuce? ... c'est lourd .....

Line 57, Column 42: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
…ef="Untitled-1.html"><div class= "xx">Depuis je ne quitte plus jamais mon app
&#9993;
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Velbain a écrit :

Le speudo-élément ":hover" est applicable sur toutes les balises comme div, a, img, p, ...

A noter quand même que le toujours très utilisé IE6 ne reconnait que le a:hover !

FranZz a écrit :

Une astuce? ... c'est lourd .....

Ben la balise <a> ne devrait contenir que des éléments de type "en-ligne"... ce qui n'est pas le cas de la balise <div> de type bloc !

Edit: j'oubliais le lien qui va bien !
Modifié par Heyoan (13 Apr 2008 - 02:46)

Ho ....

Heyoan a écrit :
A noter quand même que le toujours très utilisé IE6 ne reconnait que le a:hover !

Yes il est vrai...
En plus je l'ai lu sur zonecss.free.fr quelques secondes avant de poster et j'ai zappé de le mentionner...

Autant pour moi... Trop crevé le velbain...

hello !

Un stress de connection.

Je me suis débrouillé autrement...

<div class= "xx"><a href="Untitled-1.html">J'ai l'enfance plutôt insouciante, on peut dire. Sauf que... A l'âge de 3 ans je perds ma petite cousine de même âge. C'est une grosse tache noire ineffaçable de ma vie... 
Pendant les années scolaires, je m'enferme et je me venge dans le jeu d'échecs... 
Puis des voyages, des nouvelles rencontres, des nouveaux copains, 4 années de fac...</a></div>

Mis à part cela, pour ce qui est de a:hover et de IE, avec des commentaires conditionnels, y'a pas moyen d'arranger cela?
Modifié par FranZz (13 Apr 2008 - 03:55)

FranZz a écrit :

Mis à part cela, pour ce qui est de a:hover et de IE, avec des commentaires conditionnels, y'a pas moyen d'arranger cela?

Si ! Tu peux toujours rajouter dans un commentaire un soupçon de Javascript à base de onmouseover...

Bon ben good night ...

Hello,

Je me permets de mentionner au passage:

<a class="xx">Bla bla.</a>

a.xx {
	display: block;
	width: 200px;
	padding: 10px;
	border: solid 1px gray;
	background: #eee;
}
a.xx:hover,
a.xx:focus,
a.xx:active {
	background: white;
	border-color: black;
}

Et remarque en passant pour FranZz: une révision des sélecteurs CSS (et un peu de rigueur ) serait nécessaire.
http://www.w3.org/TR/CSS21/selector.html
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php