父<div>子元素hover联动及邮件链接hover时信封图标变色问题

1. 父<div>包含两个子元素，hover第二个子元素时能否选中第一个？ #

纯CSS做不到。因为CSS选择器只能从前往后、从上到下匹配元素，目前没有能“反向”选中前置兄弟元素的选择器（比如~只能选中当前元素之后的兄弟，没法选之前的）。

要实现这个效果，只能靠JavaScript：监听第二个子元素的mouseover和mouseout事件，手动给第一个子元素添加/移除样式类。

举个简单示例：

<div class="parent">
  <div class="child1">第一个子元素</div>
  <div class="child2">第二个子元素</div>
</div>

<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

<script>
const child2 = document.querySelector('.child2');
const child1 = document.querySelector('.child1');

child2.addEventListener('mouseover', () => {
  child1.classList.add('highlight');
});

child2.addEventListener('mouseout', () => {
  child1.classList.remove('highlight');
});
</script>

2. hover邮件链接时能否修改信封图标的颜色？ #

纯CSS同样做不到，因为信封图标所在的.box-icon是邮件链接<a>的前置兄弟元素，CSS没法通过hover后面的<a>来选中前面的元素。你给的原CSS选择器完全错误——.contact-info.box-style2 .box-icon i并不是<a>的后代元素，所以这个选择器根本不会生效。

要实现这个效果，有两种可行方案：

方案一：用JavaScript实现 #

监听链接的hover事件，手动修改图标的颜色：

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

<style>
/* for demo purposes */
.flaticon-envelope {
  display: inline-block;
  background: blue;
  height: 20px;
  width: 20px;
  color: white; /* 默认图标颜色 */
}
</style>

<script>
const mailLink = document.querySelector('.contact-info.box-style2 p a');
const envelopeIcon = document.querySelector('.contact-info.box-style2 .box-icon i');

mailLink.addEventListener('mouseover', () => {
  envelopeIcon.style.color = 'red';
});

mailLink.addEventListener('mouseout', () => {
  envelopeIcon.style.color = 'white';
});
</script>

方案二：调整HTML结构（让图标成为链接的兄弟或后代） #

如果能修改HTML，把图标和链接放在同一个容器里，就能用CSS实现：
调整后的HTML：

<div class="contact-info box-style2 ft-contact-info">
    <p>
      <span class="box-icon"><i class="flaticon-envelope"></i></span>
      <a href="mailto:info@ictconsults.tech">info@ictconsults.tech</a>
    </p>
</div>

对应的CSS：

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

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

内容的提问来源于stack exchange，提问作者Chuks Gabriel