我在 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');
}
有人有解决办法吗?非常感谢。
最佳答案
你可以像那样使用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>
关于html - 悬停时显示图像,在背景中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35418872/