将鼠标悬停在某个孩子

Question

标题可能不那么具有描述性，抱歉。我想要完成的是制作一个有9种不同图像的画廊。我想要做的是当你悬停其中一个图像时，图像的大版本显示为所有图像的背景。

我得到了以下代码：http://codepen.io/michaelc_1990/pen/NNyqJb

就像现在一样，当您将鼠标悬停在其中一个图像上时，它会显示一个图像。然而，该图像不会根据悬停的图像而改变。有没有办法选择div悬停的背景，并将其作为背景？还是有比我正在做的更聪明的方式？

我的html结构如下所示：

<table>
  <tr>
    <td id="one"></td>
    <td id="two"></td>
    <td id="three"></td>
  </tr>
  <tr>
    <td id="four"></td>
    <td id="five"></td>
    <td id="six"></td>
  </tr>
  <tr>
    <td id="seven"></td>
    <td id="eight"></td>
    <td id="nine"></td>
  </tr>
</table>

是否可以获取图像的网址并将其插入下表？

table {
  background: url('') no-repeat center top / cover;
}

我用css设置背景图片，如下所示：

#one {
  background: url('image-url-here') no-repeat center / cover;
}

Answer 1

您可以添加以下行：

document.querySelector('table').style.backgroundImage = window.getComputedStyle(e.target).backgroundImage;

在此行中，您将获得当前背景图像并将其设置为表格。

var table = document.querySelector("table");
var tds = Array.from(document.querySelectorAll("td"));

tds.forEach(a => a.addEventListener("mouseover", changeBg));
var small = true;
function changeBg(e) {
  if (small) {
    tds.forEach(a => a.style.opacity = 0);
    small = false;
  } else {
    tds.forEach(a => a.style.opacity = 1);
    small = true;
  }

  document.querySelector('table').style.backgroundImage = window.getComputedStyle(e.target).backgroundImage;
}

body * {
  box-sizing: border-box;
}

h3 {
  text-align: center;
}

table {
  margin: auto;
  background: url('http://burninbrains.com/wp-content/uploads/2016/02/Cool-Or-Fool-Donald-Trump.png') no-repeat center top / cover;
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 66.66px;
  border: 4px solid white;
  opacity: 1;
  transition: opacity 1s linear;
}

#one{
  background: url('https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat center / cover;
}

#two{
  background: url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat center / cover;
}

#three{
  background: url('https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925') no-repeat center / cover;
}

#four{
  background: url('https://images.unsplash.com/photo-1455098934982-64c622c5e066?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=8eae6295f7c95422742a20ca784bffc0') no-repeat center / cover;
}

#five{
  background: url('https://images.unsplash.com/photo-1454047637795-79e3325dfa0e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=8e20ceb0363ab9c8148ab76ce5979f2d') no-repeat center / cover;
}

#six{
  background: url('https://images.unsplash.com/photo-1440227537815-f4476b789291?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=f936b619523b02905c71d87361060713') no-repeat center / cover;
}

#seven{
  background: url('https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853') no-repeat center / cover;
}

#eight{
  background: url('https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ac3dcc36ecded066d44617b34b3e940b') no-repeat center / cover;
}

#nine{
  background: url('https://images.unsplash.com/photo-1415822138156-fd0cd874335a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=2714a0f2bf8f3fe5108dd295efeca084') no-repeat center / cover;
}

<h3>Click Don</h3>
<table>
  <tr>
    <td id="one"></td>
    <td id="two"></td>
    <td id="three"></td>
  </tr>
  <tr>
    <td id="four"></td>
    <td id="five"></td>
    <td id="six"></td>
  </tr>
  <tr>
    <td id="seven"></td>
    <td id="eight"></td>
    <td id="nine"></td>
  </tr>
</table>

http://jsbin.com/xemisoz/edit?html,css,js,output