Maison > interface Web > tutoriel HTML > CSS实现鼠标移动图片实现切换功能_html/css_WEB-ITnose

CSS实现鼠标移动图片实现切换功能_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:36:57
original
1100 Les gens l'ont consulté

CSS实现鼠标移动图片实现切换功能:
当鼠标放在一个图片上的时候可以切换为其他图片,使用javascript可以实现,下面介绍一下如何使用CSS实现此功能。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>CSS实现的图片切换效果-蚂蚁部落</title><style type="text/css">* {  margin:0;  padding:0;}ul li {  list-style:none;}.nav {  width:800px;  height:40px;  margin:150px auto;}.nav ul li {  float:left;  width:200px;}.nav ul li a:link, a:visited {  display:block;  width:190px;  height:40px;  background:url(images/wall_s1.jpg);}.nav ul li a:hover {  background:url(images/wall_s2.jpg);}.nav ul li a:active {  background:url(images/wall_s3.jpg);}</style></head><body><div class="nav">  <ul>    <li><a href="#"></a></li>    <li><a href="#"></a></li>    <li><a href="#"></a></li>  </ul></div></body></html>
Copier après la connexion

以上代码实现了,当鼠标放在链接上时,能够实现图片的切换功能。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8354

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal