当前位置：你问我答网 > 科技

HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver.

2020-08-31 科技 100阅读
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档</title><br /><style type="text/css"><br />a:hover{ background:blue; background-repeat:no-repeat;}<br /></style><br /></head><br /><body><br />HTML部分:<a href="#" style="background-repeat:no-repeat; width:100px; height:100px;">aaabcb</a><br /></body><br /></html><br />我写了一个改变背景色的代码，因为没有图片，你再自己改一下。 </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明：你问我答网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('417913709')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置">惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 2.5万阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场">如何做好把一个新产品推向市场</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 86阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱">西门子冰箱</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 112阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/417913709.html" title="HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver." class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="HTML与CSS中,如何实现<a>标签鼠标悬浮更换背景图片?我用的Dreamweaver."> </a> <a href="https://w.sf024.com/info/417913709.html" target="">HTML与CSS中,如何实现&l...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-31 </span><span> <i class="iconfont bx bx-show"></i> 100阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/488831353.html" title="用css如何调用一张图片啊，就是在html中不用img标签用css方法显示图片" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="用css如何调用一张图片啊，就是在html中不用img标签用css方法显示图片"> </a> <a href="https://w.sf024.com/info/488831353.html" target="">用css如何调用一张图片啊，就是...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 11-19 </span><span> <i class="iconfont bx bx-show"></i> 170阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1893868806245386420.html" title="CSS如何实现DIV左边图片右边文字 下边LI标签" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="CSS如何实现DIV左边图片右边文字 下边LI标签"> </a> <a href="https://w.sf024.com/info/1893868806245386420.html" target="">CSS如何实现DIV左边图片右边...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-03 </span><span> <i class="iconfont bx bx-show"></i> 250阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/460373207746340925.html" title="如何利用HTML5和CSS3代码实现模糊滤镜" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用HTML5和CSS3代码实现模糊滤镜"> </a> <a href="https://w.sf024.com/info/460373207746340925.html" target="">如何利用HTML5和CSS3代码...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-27 </span><span> <i class="iconfont bx bx-show"></i> 100阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1899987672346737140.html" title="HTML CSS中如何实现DIV中的图片水平垂直居中对齐？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="HTML CSS中如何实现DIV中的图片水平垂直居中对齐？"> </a> <a href="https://w.sf024.com/info/1899987672346737140.html" target="">HTML CSS中如何实现DIV...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-21 </span><span> <i class="iconfont bx bx-show"></i> 100阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1366222115360266219.html" title="html/ css 代码如何实现类似在hr中间夹文字的？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html/ css 代码如何实现类似在hr中间夹文字的？"> </a> <a href="https://w.sf024.com/info/1366222115360266219.html" target="">html/ css 代码...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-09 </span><span> <i class="iconfont bx bx-show"></i> 219阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2010707923470635268.html" title="html如何实现鼠标悬停显示文字，鼠标移走文字消失。" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="html如何实现鼠标悬停显示文字，鼠标移走文字消失。"> </a> <a href="https://w.sf024.com/info/2010707923470635268.html" target="">html如何实现鼠标悬停显示文字...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-08 </span><span> <i class="iconfont bx bx-show"></i> 22阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/361732837364559492.html" title="DIV CSS文字粗体字如何实现 html文字粗体字体加粗如何设置" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="DIV CSS文字粗体字如何实现 html文字粗体字体加粗如何设置"> </a> <a href="https://w.sf024.com/info/361732837364559492.html" target="">DIV CSS文字粗体字如何实现...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-01 </span><span> <i class="iconfont bx bx-show"></i> 143阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/648180116859336605.html" title="DIV CSS文字粗体字如何实现 html文字粗体字体加粗如何设置" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="DIV CSS文字粗体字如何实现 html文字粗体字体加粗如何设置"> </a> <a href="https://w.sf024.com/info/648180116859336605.html" target="">DIV CSS文字粗体字如何实现...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-25 </span><span> <i class="iconfont bx bx-show"></i> 130阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/684872037345308252.html" title="如何实现css限制字数，超出部份显示点点点鼠标滑过显示全部" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何实现css限制字数，超出部份显示点点点鼠标滑过显示全部"> </a> <a href="https://w.sf024.com/info/684872037345308252.html" target="">如何实现css限制字数，超出部份...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-10 </span><span> <i class="iconfont bx bx-show"></i> 127阅读 </span> </p> </li> </ul> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div> </footer> <script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>