CODEWITHSUNDEEP
htmlcsswordpresshoverelement
GOONhoon
GOONhoon

Reputation: 55

CSS - Hover trigger on another hover

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>

Upvotes: 2

Views: 1005

Answers (2)

focus.style
focus.style

Reputation: 6760

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>

Upvotes: 1

fadi omar
fadi omar

Reputation: 768

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;
}

Upvotes: 4

Related Questions