CSS - Hover trigger on another hover

user_12252539 0
Viewed 345

I wonder whether it is possible to trigger the last hover in this css along with the second one:

.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: #007bb5;
}

.social-menu ul li .fa:hover {
    color: #ffffff;
}

I noticed that the third hover is triggered on a quite small area resulting in

this

rather than

this

HTML:

<div class="social-menu">
  <ul>
    <li><a href="https://www.linkedin.com/in/akhacklander/"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>
element wordpress hover css html
2 Answers

If the second element you wish to put into a hover state is a child or sibling of the primary element, you can add a rule to target the hover state of the primary element and apply the same style to the second element as would a direct hover on the secondary element.

Parent-child

.parent-element:hover .hovering-child, .hovering-child:hover { background-color:red; }

Sibling

.element:hover ~ .sibling, .sibling:hover { background-color:red; }

in your case: instead of third one add this 

.social-menu ul li a:hover .fa {
    color: #ffffff;
}

if you want just to effect the first item in the list : 

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}
user_118913190

If I understood you correctly, you would like to interact i while hovering a

.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: #007bb5;
}

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="social-menu">
  <ul>
    <li><a href="https://www.linkedin.com/in/akhacklander/"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

user_31871270
Related