鼠標經過的時候替換背景和文案

（1）準備一張圖片

(2)代碼部分

HTML

<!-- 測試鼠標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;}

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。