28172 sujets

CSS et mise en forme, CSS3

Rollover combiné titre et boutton

Bonsoir à tous,
cela fait quelques heures que je cherche réaliser le même effet de rollover que sur http://css-tricks.com/.
ce qui m'intéresse est l'effet combiné de survol entre le titre et le bouton:
le survol du titre active l'effet de survol du bouton et inversement

J'ai fouillé le CSS sans rien trouver...alors que ça ne doit pas être très compliqué (je suis un amateur)

Que cela pourrait il donner en css pour le code html suivant?


		<article class="principal">
		<header>
			<h2 class="entry-title"><a href="http://www. monsite/aide" >A l'aide</a>  </h2>
		</header>
		<p>Je n'ai pas réussi à trouver sur css tricks ?</p>
<div class="bouton"><a href="http://www. monsite/aide">lire l'article</a></div>	
		</article>


bien cordialement et merci à ceux qui voudront bien passer un peu de temps sur ce problème.

yannick
Modifié par truitas (01 Sep 2011 - 19:14)
Si tu analyses la source, le "bouton" (qui n'en est pas un en fait, c'est un "span" dans un lien "a"), est contenu dans H2 (ce qui n'est valide qu'en html5) donc avec un simple effet de hover sur le H2 qui contient donc le "bouton" le css h2 a:hover fait l'affaire.

quand au span (le bouton) il est positionné en absolute, relativement à son parent (article).



article h2 a:hover {
color: #F3A01E;
background: none;
}

article h2 a span {
position: absolute !important;
bottom: 0;
top: auto !important;
left: 0;
}

Modifié par rs459 (01 Sep 2011 - 20:50)
Merci beaucoup,
pour ta réponse.
Crois tu qu'il serait possible d'appliquer ce principe à la manière dont j'ai structuré mes articles (ci dessous) ou y a t'il une autre méthode?


<article class="principal">
	
		<header>
			<h2 class="entry-title"><a href="http://monsite.fr" title=" ">Rando en raquette</a></h2>

			<footer>
				<cite><img src="img/rando.png" alt="rando raquette"/> Rando en Savoie</cite> 
                      </footer>
		</header>
					<p>Envie de nature?</p>
					  <p>Randonnée en raquette en Savoie.......</p>

<div class="plus"><a href="http://monsite.fr/rando.html/">Voir nos randos en raquettes></div>
				
		</article>


merci
Modifié par truitas (02 Sep 2011 - 01:24)
Je pense déjà que la structure et les éléments pour lesquels tu as opté ne sont pas correct.

Ton lien dans ton H2 incorpore un lien dans lequel l'attribut title n'a pas d'interêt.

Ton footer incorporé dans ton header ne semble pas approprié

a écrit :
Content model:
Flow content, but with no header or footer element descendant


http://dev.w3.org/html5/spec/Overview.html#the-header-element

L'utilisation de cite n'est pas non plus approprié pour le cas que tu en fait.

a écrit :
The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing


http://dev.w3.org/html5/spec/Overview.html#the-cite-element

Ton image dans le cite n'as pas besoin d'un alt rempli (mais qui doit rester présent et vide) si elle est purement décorative.

Ta div.plus n'est pas forcément nécessaire si elle ne contient qu'un lien.

Ton lien dans div.plus n'est pas fermé Smiley cligne

Ensuite pour répondre à ta question, de cette maniére en CSS c'est possible :


<article class="principal">
<header>
    <h2 class="entry-title"><a href="http://monsite.fr" title=" ">Rando en raquette<span>Voir nos randos en raquettes</span></a>
    </h2>
</header>
<footer>
<img src="img/rando.png" alt=""/> <!-- ICI (footer) devrait apparaître du contenu qui contextualise l'article (auteur, date de publication , lieux etc) -->
</footer>
<p>Envie de nature?</p>
<p>Randonnée en raquette en Savoie.......</p>
</article>


Seulement a partir de là tu pourras placer le span du H2 tout en bas de l'article vie un positionnement absolute.

L'autre solution est de garder la même structure (corrigée) en gardant le lien en bas, tu peux faire ca via javascript (ce qui parrait mieux, car répéter plusieurs fois le même mot dans un h2 ce n'est pas très bon pour le référencement (risque de pénalité), ni d'un point de vue accessibilité (si visuellement les phrases seront éloignés, un lecteur braille ou voix lira de manière discontinu).

avec un jquery du style (à tester)

$(".plus").hover(
  function () {
    $(this).prev(".entry-title").addClass("entry-title-hover");
  }, 
  function () {
    $(this).prev(".entry-title").removeClass("entry-title-hover");
  }
);
super merci pour toutes ces précisions et corrections,

j'ai encore un gros travail de débroussaillage à faire....

bien cordialement,
yannick
Bonjour,
Je souhaiterai un complément de réponse:
N'y a t-il aucun moyen en css de modifier le style d'un élément en survolant un autre?
j'avais vu un truc du genre quelque par :
a:hover > div#id

merci d'avance !
ok merci ca fonctionne très bien

nb:Y aurait il une solution avec un target?
Modifié par truitas (02 Sep 2011 - 17:00)
Re,

target c'est pour les ancres sauf erreur de ma part.

@saajuck

Tout dépend la hierarchie :

a:hover > div#id


se lit une div avec un ID #ID fils direct d'un lien A à l'état survolé prendra le style qui suit.
Pour son cas précis c'est plus difficile il faut remonter et redescendre dans l'arbre DOM.
Modifié par rs459 (02 Sep 2011 - 20:56)
Sujet clos
Aller à