JavaScript入门作业难题：悬停预览图时无法动态切换主区域背景图

嘿，你已经做得很棒了——能成功切换alt文本说明你已经正确获取到了悬停的图片元素，离搞定背景图只差一丢丢！

问题的核心其实很简单：你需要把当前悬停的预览图的图片地址（也就是它的src属性值）动态传入到主区域的backgroundImage里。

第一步：修改upDate函数 #

你已经拿到了作为参数传入的element（就是当前鼠标悬停的那个<img>标签），直接用element.src就能拿到它的图片地址，把这个值放到url()里就好啦：

function upDate(element) {
  // 切换alt文本（你原来的代码没问题）
  document.getElementById('image').innerHTML = element.alt;
  // 动态设置背景图：把当前预览图的src传入url
  document.getElementById('image').style.backgroundImage = `url(${element.src})`;
}

如果还没接触过模板字符串（就是用`包裹的写法），也可以用传统的字符串拼接：

document.getElementById('image').style.backgroundImage = 'url(' + element.src + ')';

第二步：完善unDo函数 #

现在鼠标离开预览图时，你只还原了文本，还需要把主区域的背景图也还原成初始状态。给unDo函数补上逻辑：

function unDo() {
  // 还原提示文本
  document.getElementById('image').innerHTML = 'Hover over an image to display the alt text.';
  // 清空背景图（还原成初始的空状态）
  document.getElementById('image').style.backgroundImage = 'url("")';
}

然后把HTML里的onmouseleave事件改成调用这个函数，不用重复写代码，更整洁：

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseleave="unDo();">
<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseleave="unDo();">
<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseleave="unDo();">

为什么之前的写法不行？ #

你之前写的'url()'是空的，自然不会显示图片；而硬编码的话只能固定显示一张。用element.src就能动态获取当前悬停图片的地址，实现随鼠标切换的效果啦。

这样修改后，你就能同时实现文本和背景图的动态切换了，试试看！

备注：内容来源于stack exchange，提问作者Katerina Mala