站長資訊網(wǎng)
css設(shè)置鼠標(biāo)放上圖片出現(xiàn)文字的方法：1、給文字元素添加“display:none;”樣式使其隱藏；2、使用“父元素:hover 文字元素{display:block;}”語句實現(xiàn)鼠標(biāo)放在圖片上顯示文字的效果。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置鼠標(biāo)放上圖片出現(xiàn)文字的方法
1、使用<div>和<span>定義將在圖片上要出現(xiàn)的文字，可以通過 <div> 和 <span> 將 HTML 元素組合起來。
代碼如下：
<div> <span>這是要在圖片上出現(xiàn)的文字</span> </div>
2、給div元素添加背景圖片，并且設(shè)置大??；給文本元素span添加“display:none;”樣式使其不顯示，代碼如下：
background-image:url(圖片名稱); width:250px; height:100px; background-position:center;
display:none; text-decoration:none;
3、使用hover選擇器使鼠標(biāo)放上圖片時，文字出現(xiàn)，代碼如下;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css" > .a{ background-image:url(1115.08.png); width:250px; height:100px; background-position:center; } .a span{ display:none; text-decoration:none;} .a:hover span{ display:block; position:absolute; top:0; left:0; color:blue;} </style> </head> <body> <div class="a"> <span>這是一副山水畫</span> </div> </body> </html>
輸出結(jié)果，當(dāng)鼠標(biāo)不在圖片上時：
當(dāng)鼠標(biāo)在圖片上時：
