CSS實現鼠標滑過圖片顯示文字介紹。這個是現在網站常用的圖片效果，當鼠標移到圖片上的時候，顯示圖片的相關介紹，鼠標一開，文字介紹消失。實現該效果代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS實現鼠標滑過圖片顯示文字介紹的方法-361模板-m.survivalescaperooms.com</title><style type="text/css">* { margin: 0; padding: 0}a img { border: none}body { font-size: 12px}a { text-decoration: none; color: #fff; font-weight: bold;}.product { display: block; position: relative; width: 300px; height: 250px; line-height: 30px}.product:hover { border: none}.product:hover span { height: 30px}.product span { position: absolute; left: 0; bottom: 0; _bottom: 4px; overflow: hidden; width: 100%; height: 0px; background: #FF0000; opacity: 0.5; filter: alpha(opacity=50); text-align: center;}</style></head><body><a class="product" href="http://m.survivalescaperooms.com/vip/svip.html"> <img src="http://m.survivalescaperooms.com/mbzjskin/images/vip.jpg" width="300" height="250" alt="歡迎加入361模板VIP家庭"> <span>歡迎加入361模板VIP家庭</span> </a></body></html>點擊查看演示
以上就是CSS實現鼠標滑過圖片顯示文字介紹的方法的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
