css实现鼠标悬停改变图片

桃扇骨 2023-10-03 19:59 126阅读 0赞

样式：

  1. <style>
  2.     .bshApp img:hover{
  3.       content:url('bshsjjscpdf/bsh_four_bottom/btn_grd_hover.png');
  4.     }
  5.     .bshWeb img:hover{
  6.       content:url('bshsjjscpdf/bsh_four_bottom/btn_jkglpt_hover.png');
  7.     }
  8. </style>

div

  1. <div class="four-bottom">
  2.     <div class="firstLine">
  3.        <div class="bshApp ">
  4.             <img class="bottomImg" src="bshsjjscpdf/bsh_four_bottom/btn_grd_normal.png"> 
  5.        </div>
  6.        <div class="bshWeb">
  7.             <img class="bottomImg" src="bshsjjscpdf/bsh_four_bottom/btn_jkglpt_normal.png">
  8.        </div>
  9.     </div>
  10. </div>

默认：9bd2ef3046de40c4b56324c7dffb632c.png

悬空：4d73202f4b3f4454bf4d8eac509af707.png

发表评论

表情：
评论列表 （有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS鼠标悬停

    > 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享： 先看效果 ![这里写图片描述][70] HTM

    港控/mmm°港控/mmm°/ 0 赞/ 411 阅读