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

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

WBOY
Freigeben: 2016-06-13 13:16:15
Original
858 Leute haben es durchsucht

请问超链接图片的切换的实现
请问我有一张小图片和一张大图片,页面显示小图片,当鼠标经过显示大图片,并且图片是超链接。
怎么用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>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage