css鼠标悬停时，换图片

html-css027

css鼠标悬停时，换图片,第1张

1首先输入代码下方的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>CSS实现鼠标移动到图片，更换图片</title>

2、然后输入下方的代码：

</head>

<style type="text/css">

*{ margin:0padding:0}

ul li{ list-style:none}

.nav{ width:800pxheight:40pxmargin:150px auto}

.nav ul li{ float:leftwidth:200px}

.nav ul li a:link,a:visited{ display:blockwidth:190pxheight:40px

3、然后在输入下方的代码：

background:url(/jscss/demoimg/wall_s1.jpg)}/*链接、点击后*/

.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg)}/*鼠标经过*/

.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg)}/*点击时*/

</style>

<body>

<div class="nav">

<ul>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

</div>

</body>

</html>

4、然后这样就完成了。

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。<div id="aaaa"><ul>，<li><img src="lanren01.jpg" width="218" height="155" /><h2>成都康定理塘稻城亚丁然后说再见</h2></li>。

4、书写css代码。<style>*{ margin:0padding:0list-style:none}img{ border:0}body{ background:#000}；#aaaa{ width:460pxheight:automargin:150px autooverflow:hidden}。

5、书写并添加js代码。<script src="jquery.min.js"></script><script>$(function(){var imgs = $('#aaaa li')

6、代码整体结构。

鼠标悬停，图标会一直不停旋转。 

如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

具体操作如下：