讓一個盒子元素，讓它顯示在懸停的測試

-6

這可能已經被問到，但我無法克服這一點。我是一個完整的noob在CSS中，但我希望你能幫助我..讓一個盒子元素，讓它顯示在懸停的測試

所以我想顯示14個「元素框（與單獨的背景等）」，如果我徘徊在它，它顯示了一些文本我的問題是，在div只是顯示了一個iframe對象（這是從頂部到底部）

http://pastebin.com/WmbPZ3AV

我做了什麼我已經有什麼，我想這樣你們也許能理解它的圖像下更容易

https://gyazo.com/cbd9d293b05233aba331731bcbfa81a8 我已經取得1 & 2. 我希望你能幫我創建第三部分:)

來源

2016-11-16 noob

嗨，歡迎來到Stack Overflow。我們感謝您的學習熱情，但這個問題留下了許多不足之處。幫助我們通過看看這個鏈接來幫助你，並在你準備好時回到我們身邊:) http://www.wikihow.com/Ask-a-Question-on-Stack-Overflow – Kyle

Css類名應該以字符開頭。如果要將寬度固定爲所設置的值，請使用display : inline-block;。

這裏是代碼示例


 
<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="description" content="Mein Projekt zu Australien."> 
 
     <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
     <style> 
 
    
 
    html { 
 
    background: url(bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
      iframe { 
 
       float:left; 
 
       clear:left; 
 
      }  
 
      
 
      .test { 
 
       width: 150px; 
 
       height: 150px; 
 
       margin: auto; 
 
       border-spacing: 15px; 
 
       border-style: ridge; 
 
       float:left; 
 
      }  
 
    
 
.showme{ 
 
display: none; 
 
} 
 
.showhim:hover .showme{ 
 
display : inline-block; 
 
} 
 
    
 
.row:hover .select{ 
 
    display: block 
 
} 
 
    
 
.select{ 
 
    display: none; 
 
} 
 
    </style> 
 
    </head> 
 
    <body> 
 
<iframe src="links.html" width="200" height="1000px"></iframe> 
 
     <div class="test showhim">Hover me <div class="1 showme">Hi </div></div> </body> 
 
</html>

你必須挖掘更多關於CSS和HTML。

來源

2016-11-16 15:53:53 jafarbtech

讓一個盒子元素，讓它顯示在懸停的測試

回答

相關問題