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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你应该用span标记或div包装Example1和Example2 并为这些包裹添加css规则。

<span id="ex1">Example1</span>, <span id="ex2">Example2</span>, Example3, Example4, Example5

并添加css

#ex1, #ex2 {
   display:inline-block;
   height:50px;
}

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

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

查看https://jsfiddle.net/4tubcy8e/6/

Answer 3

我希望这对你有所帮助。

#imgbg {
  position: relative;
  width: 100%;
  height: 265px;
}

#imgbg .Example:hover:after {
  display: block;
}

#imgbg .Example:after {
  content: '';
  display: none;
  width: 160px;
  height: 160px;
  background: url('http://i.imgur.com/9bbjE1Mb.jpg');
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -80px;
  margin-left: 145px;
  z-index: -1;
}

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

在悬停时显示图像，以背景为中心

3 个答案: