Heim  >  Artikel  >  Backend-Entwicklung  >  请教超链接图片的切换的实现

请教超链接图片的切换的实现

WBOY
WBOYOriginal
2016-06-13 10:46:061361Durchsuche

请问超链接图片的切换的实现
请问我有一张小图片和一张大图片,页面显示小图片,当鼠标经过显示大图片,并且图片是超链接。
怎么用CSS实现两张图片的切换?

------解决方案--------------------

HTML code
<style>._NO{width:80px;height:100px;border:1px solid red;float:left;background:url(http://avatar.profile.csdn.net/B/9/3/2_xiongdawang.jpg) no-repeat;}._NO:hover{background:url(http://www.fbreader.org/sites/default/files/fbreader.png) no-repeat;}<!--IE支持不好--></style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><img  src="http://www.fbreader.org/sites/default/files/fbreader.png" alt="请教超链接图片的切换的实现" ><div class="_NO"></div><script>$('img').on({        click:function(){        },        mouseover:function(){        $(this).attr("src","http://avatar.profile.csdn.net/B/9/3/2_xiongdawang.jpg");        },        mouseout:function(){            $(this).attr("src","http://www.fbreader.org/sites/default/files/fbreader.png");        }    })</script><div class="clear">
                 
              
              
        
            </div>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn