Posted in site bugs
5
12:51 am, January 17, 2021

spin rotate an element on mouse over [css]

i thought it might look good to spin this element around when the mouse is over it.

Added the following css to second_nav_toggle.

 

HTML

<a href="#!" id="second_nav_toggle" onclick="second_nav_toggle();" class="second_nav_toggle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
</svg></a>

CSS

.second_nav_toggle:hover {
  transform: rotate(180deg);
  transition: all 0.3s;
}

.second_nav_toggle {
    transition: all 0.3s;
    padding: 3px 3px 0px 3px;
    border: 1px solid;
    border-radius: 3px;
    height: 23px;
    width: 24px;
    text-align: center;
    display: inline-block;
    margin-top: 3px;
    position: absolute;
    right: 5px;
}

View Statistics
This Week
33
This Month
238
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown