3
votes

Déplacer l'élément X lorsque l'élément Y est survolé?

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
}

a {
    top: 10px;
    left: 10px;
    position: absolute;
    color: #090909;
}

Comment puis-je faire que l'image (la flèche) aille 5px vers la droite pour margin-left: 15px; lorsque la balise parent a été survolé? Est-ce possible sans javascript ou jquery?

html css css-position hover position

0 commentaires

3 Réponses :

0
votes

Comme ça?

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
}

a:hover img {
  margin-left:15px;
}


a {
    top: 10px;
    left: 10px;
    position: absolute;
    color: #090909;
}

0 commentaires

0
votes

Essayez ceci.

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
  transition:0.5s;
}
a {
  top: 10px;
  left: 10px;
  position: absolute;
  color: #090909;
}
a:hover img{
  margin-left:15px;
}

0 commentaires

5
votes

veuillez essayer ce code

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
  transition:0.5s;
}
a {
  top: 10px;
  left: 10px;
  position: absolute;
  color: #090909;
}
a:hover img{
  	opacity: 1; 
	margin-left: 50px;  
	transition: all 0.5s ease-out; 
	-webkit-transform: rotate(177deg);   
	zoom: 1;
}

0 commentaires