html - 悬停时显示图像，在背景中居中

Question

我在 Stackoverflow 上遇到了很多关于在悬停时显示图像的问题，但找不到解决我的问题的方法。

现在，当我将鼠标悬停在该段落上时，我设法在该段落的背景中显示了一个图像。 See on JSFiddle.

理想情况下，我想实现什么:一旦我将鼠标悬停在段落内的 Example1 上，我想在背景中显示 Image1，而不是在段落下方，而是在背景中居中，在所有元素下方。 As pictured here .

悬停在 Example2 上会理想地显示 Image2，而 Example3 会显示 Image3。

HTML

<div id="imgbg">
<p>Portfolio:</p>    
<p>I worked with:<br />
Example1, Example2, Example3, Example4, Example5
</p>
</div>

CSS

#imgbg {
height: 100%;
width: 100%;
}

#imgbg:hover {
background-image: url('http://i.imgur.com/9bbjE1Mb.jpg');
}

有人有解决办法吗？非常感谢。

Answer 1

你可以像那样使用javascript

    function showBg() {
      document.body.style.backgroundImage = "url('http://i.imgur.com/9bbjE1Mb.jpg')";
    }

    function hideBg() {
      document.body.style.backgroundImage = null;

    }

<div onmouseover="showBg()" onmouseleave="hideBg()" id="imgbg">
  <p>I worked with:
    <br />Example1, Example2, Example3, Example4, Example5
  </p>
</div>