0

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:info@ictconsults.tech">info@ictconsults.tech</a></p>
</div>
davidleininger
  • 909
  • 4
  • 11
Chuks Gabriel
  • 3
  • 2
  • 1
    you want the icon to change only if the email is hovered, not when either email or icon are hovered? Because otherwise you could just use hover on the parent element. – Simon Laux Aug 04 '23 at 01:36

2 Answers2

1

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:info@ictconsults.tech">info@ictconsults.tech</a></p>
    <div class="box-icon"><i class="flaticon-envelope"></i></div>
</div>
davidleininger
  • 909
  • 4
  • 11
  • 1
    This is a good solution! For anyone that doesn't already know this, the visual swap happens when you set the parent (`.contact-info`) to `display: flex` and set the `order` CSS prop on a child (`p`). In this example it moves the `p` visually after `.box-icon` since only the `p` is given an `order` value. Please note that if you try this on elements that are `tabbable`, you will have to explicitely set the `tabIndex` prop to match the `order` value. Otherwise your tab sequence is gonna go crazy. – Dewaun Ayers Aug 04 '23 at 01:53
  • This is a good call out on tab ordering. I should have clarified that it can be confusing for user that rely on DOM order and generally shouldn't be used to change the order focusable elements. – davidleininger Aug 04 '23 at 02:56
1

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:info@ictconsults.tech">info@ictconsults.tech</a></p>
</div>
Newbee
  • 702
  • 1
  • 13