当悬停目标不同元素时 - CSS

CSS提供了许多方式来改变元素在悬停状态下的样式，例如改变背景颜色、字体颜色、边框等等。但当悬停目标是不同元素时，如何改变其他的元素样式呢？下面我们来介绍一下CSS中常用的几种方式。

1. 纯CSS方式

我们可以使用CSS中的伪类选择器:hover，在悬停当前元素的同时，通过CSS选择器选择其他的元素来改变它们的样式。这种方式需要我们了解HTML结构，并在CSS中使用正确的选择器来选中其他元素。

例如：

/* 鼠标悬停在header元素上时，改变ul元素的背景颜色 */
header:hover + ul {
  background-color: #F8F8F8;
}

在这个例子中，我们使用了相邻兄弟选择器+，选择了当前元素的兄弟元素，即紧跟在header元素后面的ul元素，并修改了它的背景颜色。

2. JavaScript方式

另一种改变不同元素样式的方式是使用JavaScript。我们可以使用JavaScript监听当前元素的悬停事件，然后通过JavaScript操作DOM元素来改变其他元素的样式。

例如：

// 鼠标悬停在header元素上时，改变ul元素的背景颜色
const header = document.querySelector('header');
const ul = document.querySelector('ul');

header.addEventListener('mouseover', () => {
  ul.style.backgroundColor = '#F8F8F8';
});

在这个例子中，我们使用了JavaScript的addEventListener方法，监听header元素的mouseover事件，当事件发生时，修改ul元素的背景颜色。

3. CSS和JavaScript结合方式

最后一种方式是将CSS和JavaScript结合使用。我们可以使用CSS设置其他元素的样式，然后通过JavaScript添加或删除CSS类来改变它们的样式。

例如：

CSS：

/* 设置ul元素的背景颜色 */
ul {
  background-color: #EEEEEE;
}

/* 通过CSS类来改变ul元素的背景颜色 */
ul.active {
  background-color: #F8F8F8;
}

JavaScript：

// 鼠标悬停在header元素上时，给ul元素添加CSS类
const header = document.querySelector('header');
const ul = document.querySelector('ul');

header.addEventListener('mouseover', () => {
  ul.classList.add('active');
});

// 鼠标离开header元素时，给ul元素移除CSS类
header.addEventListener('mouseout', () => {
  ul.classList.remove('active');
});

在这个例子中，我们使用了CSS设置了ul元素的初始样式和悬停样式，然后通过JavaScript添加或删除CSS类来改变它们的样式。

以上就是三种常用的改变不同元素样式的方式。开发者可以根据实际需求选择合适的方式。