Social icons with hover effect ul li and a tag plus rotate on fontawesome icons

The first one the hover effects on ul works it is brightness is fine. I try to setup an another transform 360 on a tag when hover on it. That seems not want to work any idea?

For some reason the a:hover is ignored?

https://jsfiddle.net/h5vgrt1b/

a {
  color: yellow;
}

.div_social_test:hover>ul {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}

.div_social_test>ul {
  transition: filter 1s linear 0.25s;
}

.div_social_test>ul>li {
  display: inline-block;
}

.div_social_test>ul>li>a {
  transition: transform 1s linear 0.25s;
}

.div_social_test>ul>li>a:hover {
  transform: rotate(360deg);
}

<div class="div_social_test">
  <ul>
    <li><a href="http://www.facebook.com/company"><i class="i_test_extra fab fa-facebook-f fa-2x"></i></a></li>
    <li><a href="http://www.facebook.com/company"><i class="i_test_extra fab fa-instagram fa-2x"></i></a></li>
    <li><a href="http://www.facebook.com/company"><i class="i_test_extra fab fa-skype fa-2x"></i></a></li>
    <li><a href="http://www.facebook.com/company"><i class="i_test_extra fab fa-twitter fa-2x"></i></a></li>
    <li><a href="http://www.facebook.com/company"><i class="i_test_extra fab fa-youtube fa-2x"></i></a></li>
  </ul>
</div>

Thanks.

There are rules for when elements can be transform-ed: https://developer.mozilla.org/en-US/docs/Web/CSS/transform – I think the issue you’re seeing here is:

so if you add display: block to your a element, I think it’ll work.

edit: see here https://jsfiddle.net/yprxjcLv/1/

1 Like

check for w3 schools for better examples

Thank you so much. Yes I think about something like that with display block but not was sure or something other but thanks.