CSS懸停不起作用：嘗試在圖標上方懸停時顯示說明

因此，我是編程的初學者，並且無法使代碼正常工作。我不知道爲什麼懸停不起作用，並且很想知道我的錯誤是什麼。正如標題中所述，我希望在懸停在信息圖標上時（如在在線表單上的輸入部分旁邊找到的那個圖標）顯示一個小紙條。我似乎無法弄清楚爲什麼我的代碼不工作，但我覺得它一定是一些明顯的錯誤。CSS懸停不起作用：嘗試在圖標上方懸停時顯示說明

<html> 
    <head> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
     <style> 

      .image{ 
       height:20px; 
       width:20px; 
       padding-bottom: 5px; 
      } 
      .info{ 
       visibility: hidden; 
       display: block; 
       font-family: 'Roboto', sans-serif; 
       font-size: 12px; 
       color:#555555; 
       background-color:#efefef; 
       width:235px; 
       padding: 3px 3px 3px 6px; 
      } 
      .image:hover .info{ 
       visibility: visible; 
      } 

     </style> 
     <title>Info Button</title> 
    </head> 
    <body> 
     <img class ="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png" alt=""/> 
     <div class ="info"> 
      Transcription: Type how your name sounds.<br/> Ex. Julio Santos => Who-le-o San-tos. 

     </div> 
    </body> 
</html>

感謝，

乙

來源

2017-05-04 Barkot Efuye

試試這個希望這將幫助你http://stackoverflow.com/questions/14149360/text-on-image-mouseover – kevin

你錯就錯在這個選擇.image:hover .info，你想找到一個.info類嵌套在.image，但你的DOM不會讓他們嵌套。嘗試使用兄弟選擇器代替.image:hover + .info。

來源

2017-05-04 05:08:53

您的代碼中唯一的問題是.image:hover .info{}。將其更改爲.image:hover ~ .info{}或.image:hover + .info{}

.image{ 
 
       height:20px; 
 
       width:20px; 
 
       padding-bottom: 5px; 
 
      } 
 
      .info{ 
 
       display:none; 
 
       font-family: 'Roboto', sans-serif; 
 
       font-size: 12px; 
 
       color:#555555; 
 
       background-color:#efefef; 
 
       width:235px; 
 
       padding: 3px 3px 3px 6px; 
 
      } 
 
      .image:hover ~ .info{ 
 
       display:block; 
 
      }

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 

 
     <img class ="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png" alt=""/> 
 
     <div class ="info"> 
 
      Transcription: Type how your name sounds.<br/> Ex. Julio Santos => Who-le-o San-tos. 
 

 
     </div>

來源

2017-05-04 05:33:46

CSS懸停不起作用：嘗試在圖標上方懸停時顯示說明

回答

相關問題