鼠标悬停class='one'元素时，如何触发class='sqt'的Div样式变更？

方案一：纯CSS实现 #

利用CSS通用兄弟选择器（~）直接通过样式规则实现需求，无需脚本：

/* 鼠标悬停在class="one"的链接上时，选中后续的class="sqt"的div */
.one:hover ~ br ~ .sqo ~ br ~ .sqt {
  border: 10px dotted green;
  background-color: lightgreen;
  color: #eca261;
}

说明：因为链接和目标div之间存在<br>元素，所以需要通过~依次跳过这些中间元素，最终定位到.sqt。如果后续HTML结构调整，需同步修改选择器。

方案二：JavaScript实现 #

如果HTML结构可能变动，或者需要更灵活的控制，用JS事件监听更可靠：

// 获取目标元素
const hoverLink = document.querySelector('.one');
const targetDiv = document.querySelector('.sqt');

// 鼠标悬停时应用样式
hoverLink.addEventListener('mouseover', () => {
  targetDiv.style.border = '10px dotted green';
  targetDiv.style.backgroundColor = 'lightgreen';
  targetDiv.style.color = '#eca261';
});

// 鼠标离开时恢复原样式
hoverLink.addEventListener('mouseout', () => {
  // 清空行内样式，恢复默认或之前的CSS规则
  targetDiv.style.border = '';
  targetDiv.style.backgroundColor = '';
  targetDiv.style.color = '';
});

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