实现鼠标悬停文本时切换图片的技术求助

你当前的代码无法生效，因为<h1>标签本身没有src属性——this在这里指向的是h1元素，修改它的src对图片不会产生任何影响。要实现文本悬停切换图片，需要在h1的鼠标事件里获取到对应的img元素，再修改它的src属性。

你的尝试代码 #

<img
    height="100px"
    src="images/Logo black transparent.png"
/>
        
<h1
    onmouseover="this.src='images/Logo white transparent.png'"
    onmouseout="this.src='images/Logo black transparent.png'"
>
    Hello
</h1>

修正后的实现方式 #

方式1：内联事件直接获取图片元素

给img标签添加一个id，在h1的事件中通过id定位到图片并修改其src：

<img id="logo-img" height="100px" src="images/Logo black transparent.png" />

<h1 
    onmouseover="document.getElementById('logo-img').src='images/Logo white transparent.png'"
    onmouseout="document.getElementById('logo-img').src='images/Logo black transparent.png'"
>
    Hello
</h1>

方式2：抽离逻辑为函数（更易维护）

把图片切换的逻辑写成独立函数，代码更清晰，也方便后续扩展：

<img id="logo-img" height="100px" src="images/Logo black transparent.png" />

<h1 onmouseover="switchLogo('white')" onmouseout="switchLogo('black')">
    Hello
</h1>

<script>
function switchLogo(color) {
    const logoImg = document.getElementById('logo-img');
    logoImg.src = `images/Logo ${color} transparent.png`;
}
</script>

方式3：使用事件监听（推荐的现代写法）

避免内联事件，用JS添加事件监听，代码结构更清晰，也便于分离HTML和逻辑：

<img id="logo-img" height="100px" src="images/Logo black transparent.png" />
<h1 id="hover-trigger">Hello</h1>

<script>
const logoImg = document.getElementById('logo-img');
const hoverText = document.getElementById('hover-trigger');

hoverText.addEventListener('mouseover', () => {
    logoImg.src = 'images/Logo white transparent.png';
});

hoverText.addEventListener('mouseout', () => {
    logoImg.src = 'images/Logo black transparent.png';
});
</script>

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