Rotating icon on hover

user_18958838 0
Viewed 46

I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.

css html
3 Answers
   img:hover {      
    -webkit-transform: rotate(-180deg);      
    -moz-transform: rotate(-180deg);      
    -o-transform: rotate(-180deg);  
   }
user_175675510

If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:

.dropdown-arrow {
  transform: rotate(0deg)
  transition: transform 0.3s ease-in-out
}

.dropdown-arrow:hover {
  transform: rotate(180deg)
}

Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.

user_195531770

You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work: 

#arrow:hover {
  transform: rotate(180deg);
}
<div id="arrow">▼</div>

user_141117070
Related