Je suis en train de me frayer un chemin à travers CSS3 et je suis resté bloqué à un problème.
Le problème est le suivant:
J'ai une image qui se positionne initialement à gauche de l'écran:
.box img{
margin-left:0;
-webkit-transition:1s;
}
Maintenant, en vol stationnaire, quand je veux que l'effet ait lieu, c'est à dire. déplacez l'image 500 pixels de gauche lorsque je survole l'image, le code suivant est le suivant:
.box img:hover{
margin-left:500px;
-webkit-transition:1s;
}
Cela fonctionne tout simplement parfait. Le seul problème, c'est quand je veux le même effet quand je clique sur l'image. C’est-à-dire que je veux que l’image bouge de 500 pixels de gauche après clic et y reste . Encore une fois, lorsque je clique sur l’image, elle devrait revenir à sa position initiale.
Comment dois-je m'y prendre, s'il vous plaît expliquez-moi !!!!
Vous pouvez utiliser presque la même approche, utilisez simplement JS/jQuery pour ajouter/supprimer une classe qui possède toutes les règles telles que l'état de survol.
CSS
.box img:hover, .box img.clicked{
margin-left:500px;
-webkit-transition:1s; // you don't need to specify this again
}
jQuery
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
METTRE À JOUR
Voici un exemple: http://jsfiddle.net/Te9T5/ L’état de survol est supprimé car il n’a pas l’air agréable si vous avez le survol et le clic qui font la même chose car vous devez survolez quelque chose afin de cliquer dessus.
Avec JavaScript, vous pourriez peut-être faire quelque chose comme ça? Fondamentalement, dans mon exemple, je modifie la propriété margin-left
lorsque l'on clique sur l'image. En fonction de sa position, elle ajoute margin-left: 500px;
ou margin-left: 0;
.
Notez que j’ai ajouté une id
au img-tag, c’est pour pouvoir utiliser document.getElementById
pour accéder à/modifier la propriété margin-left
de l’image.
HTML
<div class="box">
<img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>
CSS (transitions ajoutées non préfixées)
.box img {
margin-left:0;
-webkit-transition: 1s;
transition: 1s;
}
JS
(function () {
var move = document.getElementById('move');
move.onclick = function () {
if (move.style.marginLeft === "500px") {
move.style.marginLeft = "0";
} else {
move.style.marginLeft = "500px";
}
};
})();
Si vous voulez simplement continuer avec les pseudo-classes css, vous pouvez envelopper votre balise img
dans une balise a
qui ne pointe nulle part, vous donnant ainsi la pile de classes de pseudo-ancres complète.
Pour quelque chose comme ça:
<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>
Vous pouvez ensuite accéder au clic avec css via la classe :active
psuedo:
.box .img_wrapper img {..}
.box .img_wrapper:hover img {..}
.box .img_wrapper:active img {..}
Référence complète ici: http://www.w3schools.com/css/css_pseudo_classes.asp