如何在 css 和 html 中构建悬停，其中悬停在彩色背景上时会出现图像？

Question

我不知道如何解决这个问题。情况是，我想构建一个悬停，其中首先只有一个彩色框（div 或然而），其中写有关键字，例如“我们的汉堡”，如果你真的将鼠标悬停在它上面，就会出现一个图像，而不是盒子的彩色背景，并且文本仍然在那里......我仍然不知道如何编码它，以及是否有一个没有 js 的解决方案？！

Answer 1

你可以给 div 赋予 class 并可以在 css 中设置它的样式

.hello:hover {
  background-image:url("image url here");
}

<div class="hello">Content here</div>

Answer 2

HTML：

<div>Keyword</div>

CSS：

div {
  background: #999;
  width: 200px;
  height: 200px;
}

div:hover {
  background-image: url('http://rs267.pbsrc.com/albums/ii282/paullasue/ATT859028.gif~c200');
}

在这里尝试一下：https://jsfiddle.net/qgd83cw3/

Answer 3

试试这个方法：

HTML：

<div id="Insert_here">Name
<div id="Image">Name //Or whatever you call it.

CSS：

    #Insert_here #Image{display:none;}
    #Insert_here:hover #Image{display:inline-block; visibility:visible;}
//This turns makes the image appear after you hover over the text/coloured box

Answer 4

实现这一目标的最简单方法之一是在

JavaScript

中添加一点

div

：

onmouseover="document.getElementById('textid').style.display = 'none';"