Appliquer boutton:hover/active sur les liens des catégories

[Jérémy456]

Bonjour,

 

j'ai modifier l'apparence des sous-catégorie qui apparaisse lorsque l'on est dans une catégorie,

J'ai créer une forme de bouton et j'aimerais appliquer :hover ou un :active, j'ai essayer de le placer un peut partout mais rien ne se passe.

 

Si quelqu'un connait la manip merci de la partager, car je n'ai rien trouver sur le forum.

 

voici un lien qui mène vers une catégorie ayant 3 sous catégorie: http://www.seef-store.com/fr/9-bustier-corset-et-guepiere

 

Merci à tous

[Bondaty and Co]

Pour faire simple il faut assigner un background et des padding au "a", créez un

li a.cat_name {
background: votre couleur;
padding: 5px 10px
}
li a.cat_name:hover{
background: votre couleur;
}

etc...

ajoutez votre css pour les arrondis, supprimez l'ancien background

 

Normalement ça devrait fonctionner

[Jérémy456]

J'ai suivi vos conseils malheureusement je n'ais pas réussi a le mettre en place, j'ai essayer plusieurs variante mais rien, je crois que j'ai pas compris grand chose a cette pseudo-classe. Voici le code que j'ai mis en place afin de faire apparaitre le background dans mon fichier category.css

 

.columnWide2 .inline_list.grid  li {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #8c8c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#8c8c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#8c8c8c 100%); /* W3C */
border-left-width: 2px;
 border-radius: 5px;
 border-right-width: 2px;
 margin: 2px;
 padding: 7px;
 text-align: center;
 width:auto;
 float:left;
}

puis en dessous j'ai rajouter:


a.columnWide2 .inline_list.grid:hover {
background: #000000; /* Old browsers */
}

pui essayer avec :


a.columnWide2 .inline_list:hover {
background: #000000; /* Old browsers */
}

et:


a.columnWide2:hover {
background: #000000; /* Old browsers */
}

 

mais toujours rien, cache: désactivée

[Bondaty and Co]

C'est très bien tout celà mais comment vous pouvez utiliser correctement firebug si vos caches css (CCC) sont activés.

Personnellement je ne peux pas.

 

dans l'idéal il faut assigner une class à votre li au lieu de clearfix et assigner la pseudo class :hover à votre class.

 

Ce qui pourrait être: li .votre_class:hover{} ou .votre_class:hover

 

Mais encore une fois vous travaillez à l'aveugle

[Stéphane Chonez]

bonjour,

 

tente d'appliquer le style de bouton a ton lien a.cat_name, comme ceci :

 

.columnWide2 .inline_list li a.cat_name {

background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #8c8c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#8c8c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#8c8c8c 100%); /* W3C */
border-left-width: 2px;
 border-radius: 5px;
 border-right-width: 2px;
 margin: 2px;
 padding: 7px;
 text-align: center;
 width:auto;
 float:left;
}

.columnWide2 .inline_list li a.cat_name:hover {
background:red;

}

[Bondaty and Co]

bonjour,

 

tente d'appliquer le style de bouton a ton lien a.cat_name, comme ceci :

 

.columnWide2 .inline_list li a.cat_name {

background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #8c8c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#8c8c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#8c8c8c 100%); /* W3C */
border-left-width: 2px;
 border-radius: 5px;
 border-right-width: 2px;
 margin: 2px;
 padding: 7px;
 text-align: center;
 width:auto;
 float:left;
}

.columnWide2 .inline_list li a.cat_name:hover {
background:red;

}

Celà revient à ce qui est proposé au dessus, assigner la pseudo class au "a":

li a.cat_name {
background: votre couleur;
padding: 5px 10px
}
li a.cat_name:hover{
background: votre couleur;
}

[Stéphane Chonez]

hello,

 

j'ai pas dit le contraire ;-)

mais avec son code c'est p-e plus clair !

[Bondaty and Co]

[Jérémy456]

bonne nouvelle le hover fonctionne, mais il a un comportement bizzare (vous pouvez le voir sur le site), je nais pas réussi à l'appliquer totalement par dessus le premier background, l'orsque je j'étant sa longueur le premier s'étant aussi, et si je met le deuxieme en width: auto il est toujours plus petit que le premier, vous avez une idée pour résoudre se petit bug?

 

Voila le code qui es actuellement:

 

.columnWide2 .inline_list.grid  li {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #8c8c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#8c8c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#8c8c8c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#8c8c8c 100%); /* W3C */
 border-radius: 5px;
 margin: 2px;
 padding: 7px;
 text-align: center;
 width:auto;
}
.columnWide2 .inline_list  li a.cat_name:hover {
background: #8c8c8c;
 border-radius: 5px;
 margin: 2px;
 padding: 7px;
 text-align: center;
 width:auto;
}

Edited July 20, 2013 by Jérémy456 (see edit history)

[Stéphane Chonez]

normal, vous appliquez un style a un élément 'li' et le hover sur un autre élément 'a.cat_name'

il faut appliquer sur l même élément...

[Jérémy456]

merci bien j'ai réussi en écrivant de cette maniere:

 

.columnWide2 .inline_list.grid li:hover {

 

cette écriture est correst ou c'est un coup de bol que cela marche?

[Stéphane Chonez]

c'est plus cohérent...

faudrait tester sur l'ensemble des navigateurs, j'ai un doute pour chrome et safari.... à faire le test !

 

a+

[Jérémy456]

safonctionne aussi sur ces navigateur en tout cas les derniere version

 

merci bien_

[Bondaty and Co]

Merci de mettre votre topic en [RESOLU]