28111 sujets

CSS et mise en forme, CSS3

[Résolu] Survol souris sur texte - sous titre change de couleur

Bonjour,
SVP, je suis à la recherche d'un effet CSS.

Je souhaiterai par exemple, que lorsque je passe la souris sur le texte "texte du sous-titre 1", que la background de "sous-titre h2 numéro1" change de couleur.

Est-ce possible?
Merci beaucoup

upload/39440-Sanstitre-.jpg
Ok merci,
voici le code
<section id="page">
		<h1>Titre page</h1>
			<h2>sous titre h2 numero 1</h2>
				<section class="bloc1">	
					<ul>
						<li>Texte</li>
						<li>Texte</li>
					</ul>
					<ul>
						<li>Texte</li>
					</ul>
				</section>
				
			<h2>sous titre h2 numero 2</h2>
				<section class="bloc2">	
					<ul>
						<li>Texte</li>
					</ul>
					<ul>
						<li>Texte</li>
					</ul>
				</section>
</section>
Modérateur
stephweb a écrit :
un effet CSS [...] Est-ce possible?
En l'état, IM-POS-SIBLE !

Par contre en insérant tes H2 à l'intérieur de tes blocs (.bloc1 & 2) et en appliquant l'effet au survol des blocs, n'obtiendrais-tu pas le résultat escompté ?

Soit
<section id="page">
 <h1>Titre page</h1>

<section class="bloc1">	
 <h2>sous titre h2 numero 1</h2>
  <ul>
   <li>Texte</li>
   <li>Texte</li>
  </ul>
  <ul>
   <li>Texte</li>
  </ul>
</section>

<section class="bloc2">	
 <h2>sous titre h2 numero 2</h2>
 <ul>
  <li>Texte</li>
 </ul>
 <ul>
  <li>Texte</li>
 </ul>
</section>
</section>
et donc en css
[CLASS^=bloc]:HOVER H2 {color:green;}
// ce qui signifie:
// Tous les titres de niveau 2 des éléments survolés dont la classe commence par le terme "bloc" affichent un texte de couleur verte


Qu'en penses-tu ?
Lorsque je met mes h2 dans mes blocs, mon h2 se met à gauche de mes blocs, et ça fait moche.
Le positionnement c'est la chose que je trouve la + dur en CSS, mais je vais essayer.

Merci

_Filtre anti-<span> activé.
_Pourquoi ?
ps: J'ai aussi essayé ceci (en ajoutant un bloc qui englobe, ça revient un peu au même que ce que tu ma dit), ça ne marche pas non plus.

<section id="page">
		<h1>Titre page</h1>
                <div class="bloc">
			<h2>sous titre h2 numero 1</h2>
				<section class="bloc1">	
					<ul>
						<li>Texte</li>
						<li>Texte</li>
					</ul>
					<ul>
						<li>Texte</li>
					</ul>
				</section>
                        </div>
</section>



[CLASS^=bloc]:HOVER H2 {color:green;}
ok merci,
la ça devient trop compliquer pour moi (ça fait qu'1 moi que j’apprends a coder).
Je ne comprends pas pourquoi mettre 
[class^=bloc]
, alors que dans le HTML il n'y a pas de class="bloc".
Y' a-il des cours sur des codes comme ceci?: 
[class^=bloc]

C'est la 1ere fois que j'en vois. merci
Modifié par stephweb (25 Nov 2014 - 17:36)
C'est bon, sujet résolu.
En fait, si ça ne marchais pas sur mon site avec ce code:

<!-- début contenu -->
<section id="contenu">
	<h1>Titre page</h1>
		<div class="test1">
			<h2>Sous titre h2</h2>
				<section class="blocht">	
					<ul>
						<li>texte du li</li>
						<li>texte du li</li>
					</ul>
					<ul>
						<li>texte du li</a></li>
					</ul>
				</section>
			</div>
</section>
<!-- fin contenu -->


C'est par ce que dans mon css dans mon #conenu h2, j'avais mi color blue. Et cet couleur prenais le dessus sur [CLASS^=test1]:HOVER H2 { color:#cc0000; }.

Ce que j'ai fait j'ai rajouté !important dans le code que tu m'as donné :


/* contenu */
#contenu 		{ display:table-cell; width:730px; background-color:#ffffff;  }
#contenu h2	{ background:url(../images/img-h2-2.png) no-repeat; background-color:#f7f7f7; color:blue; }
[CLASS^=test1]:HOVER H2 { color:#cc0000 !important; }


Et visiblement ça marche maintenant.

Merci
Modifié par stephweb (26 Nov 2014 - 11:42)
Modérateur
Bonne idée !

Par contre inutile de mettre le 1 dans [CLASS^=test1]

Le signe ^= signifie "tout ce qui commence par".
Pour une égalité il faut préférer la forme .test1...

Bonne journée.

Pour rappel :
$= signifie "tout ce qui fini par..."
*= signifie "tout ce qui contient..."
Modifié par Greg_Lumiere (26 Nov 2014 - 12:01)
ok, merci pour les conseil.
j'étais persuadé que les symboles $ étaient réservés au langage PHP (que j'espère apprendre bientôt).

Je suis allé sur plusieurs "grands" site web, visionner leurs CSS, et j'ai remarqué que peu de développeur utilisent les [ crochets ] ainsi que les $ dans leurs failles de style CSS...
Je pense (qu'avec l'expérience) qu'avec le CSS on peut faire des web-design superbes.
Modérateur
Visiblement la standardisation et l'uniformisation des standard tend à faire converger les syntaxes des différents langages (si ça c'est pas de la paraphrase je suis moine).

Il est vrai qu'on retrouve rarement cette syntaxe mais elle présente un avantage indéniable quand on travail sur la composition de nom (ID).

L'ID possède la particularité de créer un ancre. L'ancre est très utile pour des liens internes ou encore pour des interactions Css (utilisation du sélecteur ~).

La composition de noms consiste à composer l'ID de ses balises par des mots clés (rendant ainsi obsolètes les classes). Un exemple te parleras surement mieux :
<html><head><style>
[ID*=menu] {propriétés1}
[ID*=sub] {propriétés2}
[ID$=sub1] {propriétés3}
[ID^=menu] {propriétés4}
[ID$=truc] {propriétés5}
</style><body>
<div id="menu">
 <div id="sub1">...</div>
 <div id="sub2">...</div>
</div>
<div id="menu-truc">...</div>
<div id="menu-sub1">...</div>
</body></html>
ce qui donne :
#menu aura propriétés 1 et 4
#sub1 héritera de #menu et aura propriétés 2 et 3
#sub2 héritera de #menu et aura propriétés 2
#menu-truc aura propriétés 1, 4 et 5
#menu-sub1 aura propriétés 1, 2 3 et 4

Je trouve que ça permet de standardiser les effets de styles au sein d'un site mais mal construit ça peut vite devenir l'enfer sur Terre à cause des héritages (il me semble qu'Alsa propose aussi un tuto à ce sujet).
Modifié par Greg_Lumiere (26 Nov 2014 - 12:41)
Sujet clos
Aller à