CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现：
1. 使用兄弟选择器（Adjacent Sibling Selector）
如果两个元素是兄弟关系（即它们有相同的父元素），可以使用 + 或 ~ 选择器来实现。
示例代码：
<style>
.element1:hover + .element2 {
background-color: yellow;
}
</style>
<div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>
在这个例子中，当鼠标悬停在 .element1 上时，.element2 的背景颜色会变为黄色。
2. 使用通用兄弟选择器（General Sibling Selector）
如果两个元素是兄弟关系，但不一定是紧邻的，可以使用 ~ 选择器。
示例代码：
<style>
.element1:hover ~ .element2 {
background-color: yellow;
}
</style>
<div class="element1">悬停在我上面</div>
<div class="element3">其他元素</div>
<div class="element2">另一个元素</div>
在这个例子中，当鼠标悬停在 .element1 上时，所有后续的 .element2 元素的背景颜色会变为黄色。
3. 使用父选择器（Parent Selector）
如果两个元素是父子关系，可以通过父选择器来实现。
示例代码：
<style>
.parent:hover .child {
background-color: yellow;
}
</style>
<div class="parent">
<div class="child">悬停在父元素上时，我的背景会变黄</div>
</div>
在这个例子中，当鼠标悬停在 .parent 上时，.child 的背景颜色会变为黄色。
4. 使用 CSS 变量（CSS Variables）
如果需要更复杂的控制，可以使用 CSS 变量来动态改变样式。
示例代码：
<style>
:root {
--color: white;
}
.element1:hover {
--color: yellow;
}
.element2 {
background-color: var(--color);
}
</style>
<div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>
在这个例子中，当鼠标悬停在 .element1 上时，CSS 变量 --color 会被设置为黄色，从而影响 .element2 的背景颜色。
5. 使用 JavaScript
如果 CSS 的选择器无法满足需求，可以使用 JavaScript 来实现更复杂的交互。
示例代码：
<style>
.element2 {
background-color: white;
}
</style>
<div class="element1" onmouseover="changeStyle()" onmouseout="resetStyle()">悬停在我上面</div>
<div class="element2" id="element2">另一个元素</div>
<script>
function changeStyle() {
document.getElementById('element2').style.backgroundColor = 'yellow';
}
function resetStyle() {
document.getElementById('element2').style.backgroundColor = 'white';
}
</script>
在这个例子中，当鼠标悬停在 .element1 上时，JavaScript 会改变 .element2 的背景颜色。
基于以上几种方法，可以实现鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。选择哪种方法取决于具体的布局和需求。