鼠標(biāo)經(jīng)過(guò)的時(shí)候替換背景和文案

（1）準(zhǔn)備一張圖片

(2)代碼部分

HTML

<!-- 測(cè)試鼠標(biāo)hover替換背景圖片 --><div class="entrance"><a href="charts.html" class="e1">人物<span></span>人物</a></div>

CSS

a:link,a:visited,a:hover,a:active {cursor: pointer;}.entrance a {float: left;width: 240px;height: 60px;padding-top: 140px;margin-right: 13px;margin-top: 13px;text-align: center;font-size: 24px;color: #232323;font-weight: bold;margin-bottom: 30px;}.entrance a.e1 {background: url(https://www-mayouchen.com.cn/data/images/e1.jpg) no-repeat 0 -200px;}.entrance a span {display: inline-block;width: 2px;height: 18px;overflow: hidden;margin: 0 20px;background-color: #232323;}.entrance a:hover {background-position: 0 0;color: #fff;}.entrance a:hover span {background-color: #fff;}

說(shuō)明：
這里使用了background-position 屬性，及在鼠標(biāo)hover的時(shí)候改變圖片展示的位置，然后修改文字的顏色。

總結(jié)

以上是生活随笔為你收集整理的鼠标经过替换背景和文字的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。