Rotating icon on hover-CodePudding

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.

CodePudding user response：

   img:hover {      
    -webkit-transform: rotate(-180deg);      
    -moz-transform: rotate(-180deg);      
    -o-transform: rotate(-180deg);  
   }

CodePudding user response：

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.

CodePudding user response：

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>