Question 222759 in CSS Question posted in
Some basic documentation can be found here.

Css – within a parent <div> element, there are two children. Now my question is, can the first child be selected when the second child is hovered?

Can I change the color of the envelope icon when the email link is hovered?

.contact-info.box-style2 p a:hover  .contact-info.box-style2 .box-icon i {
    color: red;
}

/* for demo purposes */
.flaticon-envelope {
  display: inline-block;
  background: blue;
  height: 20px;
  width: 20px;
}
<div class="contact-info box-style2 ft-contact-info">
    <div class="box-icon"><i class="flaticon-envelope"></i></div>
    <p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
Tags:

2

Answers


  1. 0

    Sure can. Though for your case, you’ll need to adjust the icon and text order in the DOM and swap them visually.

    There is a next sibling selector that is the +. So if you use .contact-info p:hover + .box-icon i you can change the color, as long as the item comes next in the DOM.

    .contact-info {
  align-items: center;
  display: flex;
  gap: 8px;
}
.contact-info.box-style2 p a:hover  .contact-info.box-style2 .box-icon i {
    color: red;
}

.contact-info p {
  order: 1;
}

.contact-info p:hover + .box-icon i {
  background: lightseagreen;
}

/* for demo purposes */
.flaticon-envelope {
  display: inline-block;
  background: blue;
  height: 20px;
  width: 20px;
}
    <div class="contact-info box-style2 ft-contact-info">
    <p><a href="mailto:[email protected]">[email protected]</a></p>
    <div class="box-icon"><i class="flaticon-envelope"></i></div>
</div>
    Login or Signup to reply.
  2. 0

    If my understanding is correct. You want to change the background color of the box when hovering the link.

    If that so, you can use has() selector in css.

    Edit: As suggested by @Tim R

    /* .contact-info.box-style2 p a:hover  .contact-info.box-style2 .box-icon i {
    color: red;
} */

/* for demo purposes */
.flaticon-envelope {
  display: inline-block;
  background: blue;
  height: 20px;
  width: 20px;
}

.contact-info:has(a:hover) .flaticon-envelope{
  background: red;
}
    <div class="contact-info box-style2 ft-contact-info">
  <div class="box-icon"><i class="flaticon-envelope"></i></div>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search