[Résolu] ouverture au clic et pas au survol par ElizPetiteFée - page 1

Bonjour à tou(te)s et merci de votre aide par avance.
Je cherche à faire un slider horizontal, et j'ai trouvé un code qui me convient presque :

http://beta.rdsign.net/exemple/accordeon_horizontal/

la seule chose que je ne sais pas comment modifier pour l'adapter à mon projet est que le slide s'ouvre au clic et non au survol.En mettant :active au lieu de :hover, ça commence à s'ouvrir quand je tiens cliqué, mais dès que je relâche il se referme...

ça m'énerve ;o)

.accordion  {
    font-family: Arial, Helvetica, sans-serif;
    border-right:1px solid #CCCCCC;
}

.accordion>ul>li>a {
    -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3b75f, endColorstr=#74892d);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
    background: -moz-linear-gradient( center top, #a3b75f 5%, #74892d 100%);
    background-color:#a3b75f;
    border-style:solid;
    border-color:#56661f;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:-1px -1px 0px #000000;
}

.accordion>ul>li>a:hover{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#899a4c', endColorstr='#56661f');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
    background:-moz-linear-gradient( center top, #899a4c 5%, #56661f 100% );
    color:#fff;
}

.accordion>ul>li>div {
    background-color:#fff;
    border-style:solid;
    border-color:#ccc;
}

.accordion>ul>li>div {
    border-width:1px 0;
    height:300px;
    padding:10px;
    width:430px;
}

.accordion>ul>li>a {
    border-width:0 1px 0 0;
    width:40px;
}

.accordion  {    
    width:614px;
}

.accordion, .accordion>ul>li>a  {    
    height:322px;
}

.accordion>ul>li {
    margin-right:-450px; 
    width:491px;
    transition: margin-right 0.5s ease-in-out 0.1s;
    -moz-transition: margin-right 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-right 0.5s ease-in-out 0.1s;
    -o-transition: margin-right 0.5s ease-in-out 0.1s;
}

.accordion {overflow:hidden;}
.accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ 
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;}
.accordion>ul>li>div {float:left;}
.accordion>ul>li:hover {margin-right:0px;}

MERCI !!!

ElizPetiteFée

17 avril 2019 à 16:03:52

vernaisc

18 avril 2019 à 13:23:59

Hello !

Si tu souhaites effectué une action au clic, il te faut utiliser Javascript. En ajoutant l'attribut onclick="taFonctionEnJS()", à chaque clic sur l'élément avec cette attribut, la fonction sera exécutée