Changement de couleur lors du survol de la souris

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changement de couleur lors du survol de la souris

Message par Annalynne Dim 23 Oct 2011 - 21:21

Bonjour&Bonsoir Very Happy

Je voudrai savoir le CSS pour que les titres des sujets changent de couleur au survol de la souris. J'ai cherché un peu partout, mais je n'arrive pas à le trouver.

Je vous remercie d'avance Smile


Dernière édition par Annalynne le Ven 28 Oct 2011 - 21:05, édité 1 fois
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Dim 23 Oct 2011 - 22:17

Salut Annalynne,

Le titre des sujets a l'identifiant (en bleu) a.topictitle et en rouge c'est pour indiquer que c'est un lien.
Donc dans le CSS on le reprend en lui ajoutant la mention :hover pour indiquer que c'est quand le curseur passe dessus que ça doit agir :
a.topictitle:hover {
color: #code-couleur;
}
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Dim 23 Oct 2011 - 22:37

Désolé Final-Blonde, mais ça marche pas :s
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Dim 23 Oct 2011 - 22:46

Oui, j'ai regardé sur le css source, avec tous ces codes qui se contredisent, et surtout en dernier un code qui peut tout annuler :
a.{forumlink:hover
}
Ce n'est pas une propriété !

Réessaie parce que chez moi, c'est bien le bon code...

Nous parlons bien de la couleur du titre des topics, des sujets ?

NB : A la place de #code-couleur bien sûr qu'il faut que tu remplaces ceci par un code hexadécimal de couleur, ou sans le dièse si tu mets le nom de la couleur.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Dim 23 Oct 2011 - 23:19

Oui oui, je parlais bien de la couleur des titres des topics et des sujets Smile

Oui, j'avais remplacé par une couleurs, évidemment. J'ai réessayé plusieurs fois, mais ça marchait pas.

Voilà ma feuille de styles si ça peut t'aider Smile :

Code:
.forumline{
border: 1px #8d8d8d
dashed;
}

.bodyline{
background-color: #transp;
border: 1px #8d8d8d
dotted;
}
u{border-bottom: 1px dotted;border-color:#a9b841;text-decoration: none
}

I{border-bottom:none; color:#999999;text-decoration: none
}

a:hover {
text-decoration: none ; color; black ; 1px dotted #758219;
}

.bodylinewidth {
width:60%}

a img {
border: none;
}

a.cattitle{
 text-decoration: none;
 color : #999999;
 }
a.cattitle:hover{
 text-decoration: none;
 }
.forumlink{
 font-weight: bold;
 font-size: 12px;
 color : #999999;
 }
a.forumlink {
 text-decoration: none;
 color : #999999;
 }
a.forumlink:hover{
 text-decoration: none;
 color : #999999;
 }
 a.nav{
 text-decoration: none;
 color : #999999;
 }
a.nav:hover{
 text-decoration: none;
 }
 a.topictitle:visited{
 text-decoration: none;
 color : #999999;
 }
a.topictitle:hover{
 text-decoration: none;
 color : #999999;
 }
 a.postlink:hover{
 text-decoration: none;
 color : #999999}
 a.gen:hover,a.genmed:hover,a.gensmall:hover{
 color:#999999;
 text-decoration: none;
 }
a.mainmenu{
 text-decoration: none;
 color : #000000;
}
a.mainmenu:hover{
 text-decoration: none;
 color : #383838;
 }
 a.copyright:hover {
 color: #dba1c1;
 text-decoration: none;
}
a:link
{
text-decoration: none;
}

a:visited
{
text-decoration: none;
}

a:active
{
text-decoration: none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }



.quote{
font-family: Tahoma;
font-size: 12px;
color:#999999 ;
line-height: 125%;
background-color: #999999;
border: #cfcdce;
border-style: solid;
border: 1px #a08491
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #9b6b6b;
background-color: #E6E6E6;
border: #cfcdce;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px
border: 1px #a08491
dotted;}

a.{forumlink:hover
}
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Dim 23 Oct 2011 - 23:32

Comme je l'ai dit, tu as ici un code méga faux : a.{forumlink:hover
}
C'est le dernier.
Supprime-le, revalide ta feuille de style et vois si ce n'est pas bon...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Lun 24 Oct 2011 - 13:11

J'ai supprimé a.{forumlink:hover
} à la fin, comme tu l'as dit, et j'ai rajouté a.topictitle:hover{
color #code-couleur;
} . Mais ça marche pas :s . Dis-moi si tu vois un problème :

Code:
.forumline{
border: 1px #8d8d8d
dashed;
}

.bodyline{
background-color: #transp;
border: 1px #8d8d8d
dotted;
}
u{border-bottom: 1px dotted;border-color:#a9b841;text-decoration: none
}

I{border-bottom:none; color:#999999;text-decoration: none
}

a:hover {
text-decoration: none ; color; black ; 1px dotted #758219;
}

.bodylinewidth {
width:60%}

a img {
border: none;
}

a.cattitle{
 text-decoration: none;
 color : #999999;
 }
a.cattitle:hover{
 text-decoration: none;
 }
.forumlink{
 font-weight: bold;
 font-size: 12px;
 color : #999999;
 }
a.forumlink {
 text-decoration: none;
 color : #999999;
 }
a.forumlink:hover{
 text-decoration: none;
 color : #999999;
 }
 a.nav{
 text-decoration: none;
 color : #999999;
 }
a.nav:hover{
 text-decoration: none;
 }
 a.topictitle:visited{
 text-decoration: none;
 color : #999999;
 }
a.topictitle:hover{
text-decoration: none;
color : #999999;
 }
 a.postlink:hover{
 text-decoration: none;
 color : #999999}
 a.gen:hover,a.genmed:hover,a.gensmall:hover{
 color:#999999;
 text-decoration: none;
 }
a.mainmenu{
 text-decoration: none;
 color : #000000;
}
a.mainmenu:hover{
 text-decoration: none;
 color : #383838;
 }
 a.copyright:hover {
 color: #dba1c1;
 text-decoration: none;
}
a:link
{
text-decoration: none;
}

a:visited
{
text-decoration: none;
}

a:active
{
text-decoration: none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }



.quote{
font-family: Tahoma;
font-size: 12px;
color:#999999 ;
line-height: 125%;
background-color: #999999;
border: #cfcdce;
border-style: solid;
border: 1px #a08491
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #9b6b6b;
background-color: #E6E6E6;
border: #cfcdce;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px
border: 1px #a08491
dotted;}


a.topictitle:hover {
color: #6495ED;
}
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 15:54

Nope, à priori pas de problème sauf que tu as des codes à double et beaucoup de lignes de codes superflue.

Et si je mets ton CSS dans le mien tel quel, j'ai bien un "bleu" lors du hover, même sur Mozilla.

Aurais-tu modifié quelque chose dans le template topics_list_box, genre un class autour des titres :
Code:
<h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Lun 24 Oct 2011 - 15:59

Tu penses que c'est du aux codes que j'ai en double ?
Sinon, j'ai rien modifié dans le template topics_list_box, le voilà si tu veux ^^ :

Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
      <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
      <th align="center" nowrap="nowrap" width="100"> {topics_list_box.row.L_AUTHOR} </th>
      <th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th>
      <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
      <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 16:11

Bien que tu devrais ranger ton CSS, c'est très important, tu as des doubles codes avec des propriétés contradictoires, sachant que c'est ce qui vient en dernier dans le CSS qui agira dans l'apparence...
Mais ce n'est pas le CSS qui pose problème puisque chez moi avec le même CSS j'ai le changement de couleur avec le hover (celui du dernier code)... /-:

Essayons encore avec le !important dans le dernier code :
a.topictitle:hover {
color: #6495ED!important;
}

kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Lun 24 Oct 2011 - 17:11

Ca marche même pas avec
a.topictitle:hover {
color: #6495ED!important;
}
Dans ma feuille de styles je vois pas où il y a des doubles codes :s Je vois des codes qui se ressemblent, mais il y a toujours un mot qui les différencie. Est-ce que tu pourrai m'aider à trier ma feuille de styles s'il te plait ^^ parce que moi et le CSS ça fait 2 ...
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 20:10

Non, je ne pense pas que ce soit lié à ton CSS puisque chez moi tout va bien...

Là ça me dépasse...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Lun 24 Oct 2011 - 20:29

Ok, merci quand même Smile. J'essayerai de trouver la solution
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 20:44

Ah ici :
a:hover {
color; black ; ??? 1px dotted #758219;
}
Essaie de supprimer ce code, déjà qu'il comporte une vilaine erreur, mais en plus il concerne tous les liens.

NB : Je suis en train de voir pour "ranger" ton CSS, mais j'avoue que je n'aime pas du tout faire ça... /-:
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 21:11

Alors voilà un rangement par le vide :
Spoiler:
En rouge, tout ce qui est inutile ! Et il y a du doublon.
Tu peux aussi gérer les couleurs par la gestion des couleurs (onglet de gauche) si c'est pour les mêmes couleurs. Rien ne sert de charger en plus la feuille de style.
Ne l'utilises que pour déterminer des exceptions, comme pour le titre des topics.

Si un hover doit avoir les mêmes propriétés que sans le hover, pas besoin de l'ajouter.
Quant aux "border" voilà comment les écrire : Si tu mets "solid" en premier pour plus bas mettre "dotted", c'est "dotted" qui sera affiché.

Pour le non-soulignement des liens, le troisième code suffit.

Il faut aussi regrouper les codes, si possible en allant du haut de la page en pied de page.
Essayer aussi de coder à sa façon et pas un coup tout sur une ligne, d'autre avec des sauts de ligne et des espaces latéraux en début de ligne, entre les deux points, etc...
Plus c'est le berdol dans ta feuille de style, plus ça le sera aussi dans ton forum, en gros...
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Lun 24 Oct 2011 - 22:22

Merci beaucoup pour l'arrangement de ma feuille de style ! Very Happy

Par contre, ça n'a rien changé, quand le souris survole le lien, il ne se passe rien ^^

Voilà ce que ça donne dans ma feuille de styles :

Spoiler:

Au pire, c'est pas grave, je tenterai de trouver la solution Smile
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par kheino Lun 24 Oct 2011 - 22:44

Wouarf, je t'avais corrigé ta feuille de style, il te suffisait juste de la copier-coller TOUT sauf ce qui est en rouge.
En plus je t'ai donné les explications et ton CSS (ainsi que ton forum) en est sacrément allégé :

- Par exemple, pour tous les codes avec la même couleur, tu peux le gérer via le tableau des couleur dans l'onglet de gauche de la feuille de style, où tu peux choisir la couleur du texte, la couleur des liens, des liens survolés, visités, etc. Ces codes se retrouvent déjà dans le CSS de base, et rappelés sur le CSS personnalisé que pour les modifiés en cas d'exception.

- Le 3ème code que je t'ai donné supprime toute décoration sur TOUS les liens, pas besoin de remettre cette ligne de code partout.

- N'utiliser le CSS que pour les exceptions : Tu veux que le hover des liens de la liste des topics soient en une autre couleur que les liens en général, alors là le CSS est nécessaire.

- Enfin, si je prends le temps de corriger ta feuille de style, il ne faut pas remettre exactement les mêmes erreurs en place. Je n'ai rien modifié à tes réglages, j'ai juste "simplifié et nettoyé".

Bon, pour ce qui est des liens de la liste des topics, REMPLACE le codeà ce sujet par :
.topictitle a:hover {
color: #6495ED;
}

C'est un EDIT.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur lors du survol de la souris

Message par Annalynne Ven 28 Oct 2011 - 21:05

Ok, merci de ton aide et d'avoir trié ma feuille de styles.
Annalynne

Annalynne
***

Féminin
Messages : 111
Inscrit(e) le : 25/08/2011

Annalynne a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum