调用修改目标元素innerText的函数后Hover效果失效问题求助

嘿，我一眼就瞅出问题所在啦！你遇到的hover失效情况，根源出在CSS选择器的写法和JavaScript修改DOM的方式不匹配上。

问题原因拆解 #

先看你的CSS代码：

.option :hover { box-shadow: 0 0 0 3px burlywood; cursor: pointer; }

注意.option和:hover之间的空格——这是一个后代选择器，意思是“给.option内部的所有子元素添加hover效果”。页面刚加载时，每个.option里都有一个<div>，所以hover能正常触发在这个内层div上。

但当你点击Start按钮调用loadQuestions()时，用了opt1.innerText = 'A: 55'这类代码，这会把.option内部的原有<div>整个替换成纯文本，内层div直接消失了！没有了可匹配的子元素，.option :hover自然就失效了。

两种解决方法任你选 #

方法一：修改CSS选择器（最简单）

把CSS里的空格去掉，让hover直接作用在.option容器本身：

.option { border: 2px solid blue; }
.option:hover { box-shadow: 0 0 0 3px burlywood; cursor: pointer; }

这样不管.option内部是什么内容，hover效果都会直接应用在容器上，再也不会因为内部元素变化而失效。

方法二：修改JavaScript代码（保留原有DOM结构）

如果想保留原来的CSS选择器逻辑，那就在JS里只更新内层<div>的内容，而不是替换整个.option的内容：

const question = document.getElementById('question');
const opt1 = document.getElementById('opt1');
const opt2 = document.getElementById('opt2');
const opt3 = document.getElementById('opt3');
const opt4 = document.getElementById('opt4');

function loadQuestions() {
  question.innerText = 'How old are you?';
  // 找到每个.option里的div，只修改它的文本
  opt1.querySelector('div').innerText = 'A: 55';
  opt2.querySelector('div').innerText = 'B: 52';
  opt3.querySelector('div').innerText = 'C: 82';
  opt4.querySelector('div').innerText = 'D: 12';
}

这样内层的<div>会被保留，.option :hover的选择器依然能匹配到元素，hover效果就正常工作了。

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