如何在css和html中構建懸停，其中圖像在懸停在彩色背景上時出現？

Question

我不知道如何解決這個問題。這種情況是，我想建立一個懸停，首先是一個彩色框（div或是），並在其中輸入關鍵字。 「我們的漢堡」，如果你真的把它徘徊，它會出現一個圖像，而不是盒子的彩色背景，文本仍然存在......我仍然不知道如何編碼，如果沒有js的解決方案？！

Answer 1

你可以給類股利和可以風格它的CSS像

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

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

Answer 2

一個最簡單的方式來實現，這將被添加一小段JavaScript到div - onmouseover="document.getElementById('textid').style.display = 'none';"

Answer 3

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 4

試試這個方法：

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