<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> .bg{ background-color: #9b9b9b; } .tu{ background-color: #2b99ff; border: 1px red dashed; width: 80px; height: 90px; float: left; position: relative; } .clearfix:after{ content: "00"; display: block; clear: both; visibility: hidden; height: 0; } .tubg{ display: none; position: absolute; right: 0; left: 0; top:0; bottom: 0; color: black; } .tu:hover .tubg{ background-color: #fbf6ff; display: block; opacity: 0.8; color: #f4323a; font-size: 15px; } </style> </head> <body> <div class="bg clearfix"> <div> <div class="tu"> <div class="tubg" >333</div> </div> </div> <div> <div class="tu"> <div class="tubg" >333</div> </div> </div> <div> <div class="tu"> <div class="tubg" >333</div> </div> </div> </div> </body> </html>
首先 我們做出了一個簡單的畫面,
鼠標移動到第一個格子的時候出現了
此時改變了背景還加入了字符串,這個整體實現是通過以下幾個知識點:
1
css的偽類的使用: hover 是實現了鼠標移動到的改變,但是這里我們不是簡單的改變背景顏色,
2
在顯示元素后面加了一行標簽,本來是應該直接顯示的,但是我們給他的dsiplay設置了none ,將其隱藏起來.. hover后改變的是他的display=block
把此元素展示出來了.用這樣的方法.
注:如果我們只是改變css的背景顏色 直接hover元素背景色就可以了 例如我們設置了一個標簽將其css屬性加上已下
:
但是如果我們要hover顯示出來的背景是一個圖片事件或者其他.就必須使用前面的復雜方法 先隱藏再顯示.