Sujets similaires

Bonsoir,
J'aimerais savoir de quel genre de hover, ils ont utilisés pour faire la navigation, je veux qu'on me donne le css, et html, non pas pour recopier car j'aimerais me débrouiller toute seule pour faire le même genre d'effet sans faire une infobulle, mais je suis toute nouvelle avec ce genre de chose donc voilà peut-être qu'en prenant modéle sur ce forum me donnant tout et m'expliquant chaque chose, je comprendrais :
http://www.hollywoodpeople.net/

merci beaucoup

Bonjour!

C'est tout simplement un changement d'opacité.

Voici les propriétés:

Code:: .XX:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

Ce n'est qu'un exemple comme valeurs.

Pour le FILTER, c'est la propriété qui est spécialement pour les version antérieur de IE 8. Tu peux changer le 50 pour n'importe qu'elle valeur entre 0 et 100 (100 étant opaque et 0, transparent)

Pour les 2 autres, la première est pour firefox et l'autre pour les autres navigateurs. Tu peux mettre des valeurs entre 0 (transparent) et 1 (opaque).

Si tu as d'autres questions, n'hésite pas Wink

Oui j'ai quelques questions :

le html qu'on utilise à ce moment là c'est toujours div class ou s'en est un autre ?
Et il ne faut pas employer span comme les infobulles ?
On n'a pas besoin de mettre par exemple :

.XX {
}

.XX: hover {
}

On peut directement prendre la dernière ?
Parce que j'aurais aimé faire en faite, c'est changer la couleur de la bordure dans ce cas, ne faut pas t-il les deux ?

Désolé avec mes question ^^'

Si tu veux changer la couleur d'une bordure, effectivement, il faut qu'il y ait une couleur "de base" dans le CSS (dans la classe du div) et une autre couleur, celle qui va apparaître lors du passage d la souris, dans le :hover. Ceci est obligatoire si tu veux une bordure déjà avant (cette dernière n'étant pas forcément là de base avec FA).

Pour les infobulles, je te corrige: on est pas forcé d'utiliser des span, on peut très bien utiliser des div! Rien ne t'en empêche! En fait, pour les infobulles, on peut utiliser tout et n'importe quoi (ds liens, des div, des span, etc...) pour la chose sur laquelle on doit passer la souris pour que l'autre apparaisse.

En fait, en html, tu utilises ce qui t'arrange le mieux. Cependant, je n'ai pas très bien compris ce que tu veux faire, alors je ne peux pas vraiment te conseiller là, de suite!

Alors ce n'est pas le changement d'opacité que tu veux faire mais un changement de couleur de bordure?

Parce que ce que je t'ai donné plus haut c'est pour le changement d'opacité.

Il faudrait vraiment que tu nous expliques avec plus de précision ce que tu souhaites faire...

Si c'est bien un changement de couleur de bordure de ton header, tu utiliseras alors encore hover, mais tu dois aller entourer ton header d'une div (je n'ai pas testé et je dois quitter mais en théorie ça devrait fonctionner) dans le overall_header.

Alors, dans ton CSS, tu ne fais que mettre des bordures =:

Code:: .XX {
border : 3px solid #ffffff
}

.XX:hover {
border: 3px solid #000000;
}

Ce n'est qu'un exemple mais quand tu passes ta souris, ta bordure devient noire au lieu de blanc.

Pour ce qui est du code qui correspond au header, c'est celui-ci:

Code:: table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>



<td align="center" width="100%" valign="middle">
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}</span>
</td>



<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>
<td>
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
</td>

</tr>
</table>

Si la div ne fonctionne pas, il faudra que je fasse des essais ou si Nyo a une idée, si toutefois c'est bien ce que tu désires faire Wink

Fire-Fly :: En faite, ce que j'aimerais c'est la bordure, oui, mais aussi comprendre hover pour pouvoir changer plus qu'une bordure, car je ne sais pas quand j'ai essayé de faire quelque chose avec hover, j'ai remarqué que même avec div, a, et span ca ne marchait pas. En faite, j'ai mis background, text-align, ... pour faire un cadre par dessus l'image et pouvoir écrire dessus, mais ça ne marchait pas, donc j'ai voulu apprendre hover pour pouvoir me débrouiller toute seule, et j'aimerais surtout apprendre pour changement de couleur *-* j'espère que j'ai été clair éè

Ce n'est pas la bordure du header, mais d'un cadre tout simple avec "background, et border" qu'on fait par html, si tu vois ce que je veux dire, c'est pour ça que je demandais le code html, donc si je prend ton code, je devrais mettre en faite, tout ce que je met normalement comme cadre, background, ects.. et aux deuxièmes changer la couleur, mais là j'emploie div class ou autre chose pour mettre entre le nom du css entre les div ?

Nyo the neko :: D'accord, je comprends ce que tu veux dire.

Parce que je vois chaque fois :
.XX {
}
.XX : hover {
}
x1 avec span.

Partout dans les codes d'infobulle, alors je me suis dis que c'est obligé qu'il est "span" pour que l'infobulle marche, car j'ai voulu essayé en mettant div class, et y mettant dedans : background, text-align, border, pour faire un cadre, mais aprés ca n'a pas marcher. Je ne sais pas pourquoi? Peut-être est-ce parce que j'avais mis que ".XX : hover" mais je ne vois pas comment faire autrement, car aprés j'avais mis le div class et essayant de mettre du texte pour qu'il soit dans le cadre que j'avais fais mais ça ne marchait pas, donc je me suis dis qu'il doit forcément avoir span pour que ca marche. Si tu veux j'avais mis ca :

Code:: .XX : hover {
Background-color: #000000;
text-align:justify;
width:100px;
height:100px;
}
et <div class="XX"><img src="XX"> X Y</div>

Donc je me suis dis qu'il fallait absolument du span pour que ca marche, mais en faite je cherche à utiliser par n'importe quel facon hover, bordure, texte, cadre, qu'importe car j'aime coder et j'aimerais apprendre à faire ce genre de chose avec hover, le changement Smile

^
Désolé de trop parler ^^'

Hop'

Tu veux appliquer le hover a une image ?

Anoobnyme :: J'essaye de trouver toutes les façons d'utiliser hover pour être autonome après, donc en faite, la deuxième chose que j'aimerais, c'est une image oui, mais qu'au passage de la souris y est le cadre "background" passe par dessus et qu'il y est le texte. J'ai essayé d'utiliser une autre façon que l'infobulle en faite, mais ça ne marche pas, sans "span" aussi.
edit : je ne pourrais que vous répondre samedi soir, je ne serais pas disponible avant ou peut-être demain avant de partir bosser.

D'abord tu dois savoir qu'on utilise pas n'importe quoi, une div est pour une mise en forme (créer un bloc) et span sert pour la mise en page (pour le texte, paragraphes). Donc si tu veux appliquer un effet sur une partie d'un texte je te conseille d'utiliser span. Bref pour revenir a ton "apprentissage" il faut ceci pour ton image avec un texte (en dessous par exemple) :

Code:: <div class="XX"><img src="XX"><br /> X Y</div>

pour le code css :

Code:: .XX{
width: Vpx;
height: Vpx; /*il faut ajuster la taille pour que ça colle avec ton image*/
}

.XX:hover{
background-color: couleur:
}

Comme tu as pu le voir j'ai indiquer la taille initial du bloc afin que le hover soit pas trop gros et grand.

Vu qu'on parle d'image je peux aussi te parler du hover sur image ;

si tu veux lui appliquer par exemple une bordure au hover, il suffit d elui mettre ceci dans le code html :

Code:: <img sr=c"URL" class="TACLASS" />

et dans ton css :

Code:: .TACLASS:hover{
border: Vpx typedebordure couleur;
}

Au plaisir Wink

J'aimerais rajouter, les liens sur Forumactifs sont un peu spéciaux car une propriété CSS est appliquée automatiquement, soit celle que tu a mis dans la section des couleurs.

Tu as donc probablement rencontré le problème lorsque tu as voulu ajouter des liens, par exemple, dans ta PA, ton qeel, n'importe où, et que tu as essayé de les personnalisés, il faut savoir c'est quoi le truc.

Par exemple que tu fais ceci sur une PA:

Code:: <div class="traditionnel_XX"><a href="...">LIEN</a></div>

et que tu appliques un CSS de la sorte:

Code:: .tranditionnel_XX {
color: COULEUR;
font-family: POLICE;
font-size:GRANDEUR;
}

Et bien, ça ne fonctionne pas.

Si tu mets la classe directement dans la balise < A > non plus. La solution la plus simple serait de faire ceci:

Code:: HTML:

<div class="XX">
<a href="lien">LIEN</a>
<a href="lien1"> LIEN1</a>
</div>

CSS:

.XX a {
color: COULEUR;
font-family: POLICE;
font-size:GRANDEUR;
}

.XX a:hover {
color: AUTRE COULEUR;
font-family: AUTRE POLICE;
font-size: AUTRE GRANDEUR;
}

Dans le fond, le 1er CSS veut dire: tous les liens compris dans la balise portant la classe XX prendront ses propriétés. Le 2e veut dire: tous les liens survolés compris dans la balise portant la classe XX prendront ses propriétés.

Les codes qu'on te donne, tu peux les essayer si tu veux! Donne leur de vrais propriétés, noms, etc, mets les dans ta PA et donne nous des nouvelles Wink

Tiens, par exemple:

HTML :

Code:: <div class="square">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href="http://www.css-actif.com/">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

CSS:

Code:: .square {
height: 150px;
width: 150px;
background-color: #ffffff;
color: #000000;
border: 3px solid #000000;
overflow: hide;
}

.square:hover {
background-color: #000000;
color: #ffffff;
border: 3px solid #ffffff;
}

.square a {
color: #0b4388;
lettter-spacing: -1px;
}

.square a:hover {
color: #a2c1e7;
lettter-spacing: 2px;
}

Voilà, donne-nous des nouvelles!

Anoobnyme :: Alors si je veux mettre du texte dans le cadre blanc, je dois mettre span, si je me trompes pas, vu que c'est la mise en forme du texte, et paragraphe. Simplement j'ai une question, quand je l'ai mis comme tu as mis récémment dans ta réponse, ca me le mettait à côté, donc il faut que je refais le css en rajoutant une nouvelle fois le même et y mettant span pour que je puisse écrire sur le cadre blanc, si je me trompe pas.

Fire-Fly :: J'essayerais cet après-midi, je te tiens au courant. Désolé, mais j'étais pas toute seule jusqu'à midi donc je n'ai pas pu faire grand chose.

Je crois que je me suis mal exprimé, je m'en excuse;
Dans ton cas tu peux mettre la div, span est fait pour la personnalisation du texte.
Si dans ta div tu mets les textes en gras et tout en majuscules, ça sera tous les textes de ta div qui auront les propriété que tu as mis dans ton CSS. Or qu'avec span tu peux ainsi décidé quel texte sera en gras et l'autre tout en majuscule.

J'espère avoir éclairci les choses.
Au plaisir Bravo !

Je vois mieux, mais admettons que je veux que le background apparait sur l'image et que le texte soit sur le background, c'est span que j'utilise mais comment je fais pour le mettre dessus ou pour qu'il apparait lentement ou que le background apparait par la droite ou la gauche ?

De toute façon lorsque tu utilise bakckground, on sait tous que ça sera mis en arrière-plan, donc ton texte sera au premier plan (donc sur le background). Pour qu ele background s'affiche lentement lors du passage du curseur, on ulise hover avec les transitions :

Code:: -webkit-transition: all 0.Vs ease-out; /* Safari, Chrome */
-moz-transition: all 0.Vs ease-out; /* Firefox */
-ms-transition: all 0.Vs ease-out; /* IE */
-o-transition: all 0.Vs ease-out; /* Opera */
transition: all 0.Vs ease-out;

Il faut remplacer les V par une valeur que tu souhaite Wink

Tu peux même avoir une transition de plusieurs secondes mais ça serai trop long après et c'est pas très agréable.

Bonjour,

Ce problème est-il toujours d'actualité ? Si ce sujet n'a toujours pas de reçu de réponse dans quatre jours, il sera archivé.

Merci d'avance. Comment utiliser hover. 510527

Non, vous pouvez le verrouiller désolé de ne pas avoir avertis plutôt.

Hello (:
Très bien, dans ce cas je déplace le sujet !
Ce n'est pas grave d'avoir oublié de nous avertir ^^

Comment utiliser hover.

Comment utiliser hover.

Sujets similaires

Sujets similaires

Partenaires Or