Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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 by Jérémy456 (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...