css 鼠标移动到按钮图片改变：

方法一：

<style>
.pp a

{ 

　　width:575px; 

　　height:157px; 

　　background:url(1.jpg);/*图片地址*/ 

　　display:block;

}

.pp a:hover

{ 

　　width:575px; 

　　height:157px; 

　　background:url(2.jpg);/*替换的图片地址*/ 

　　display:block;

}

</style>

</head>
<body>

　　<div class="pp"><a href="#"></a></div>                                                                

</body>

方法二：



link:平时的状态   




visited:被访问过之后




hover:鼠标放上时




active:被按下时   




css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active  一定要按上面的顺序写，不然显示的可能会和你预想的不一样




<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(1.jpg);}         /*链接、点击后*/
.nav

 ul li a:hover{background:url(2.jpg);}                                  

                                                    /*鼠标经过*/
.nav

 ul li a:active{background:url(3.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>


 






图片换层：

<style>

.div{; position:absolute; left:10px; border:2px #3300FF solid; 
color:#FFFFFF; font-size:48px; margin-left:200px;}

</style>

<body>
<div class="div" style="background-color:#FF0000">1</div>
<div class="div" style="background-color:#999999;">2</div>
<div class="div" style="background-color:#000000">3</div>
<div class="div" style=" background-color:#009900">4</div>
</div>

</body>

<script type="text/javascript">
$(function(){
　　var z=-1;
　　$("div").click(function()

　　　　　　　　{
　　　　　　$(this).animate({left:"310px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);
　　　　　　　　})
});






鼠标放上透明度改变直到隐藏：

<style>

#div_test {
width: 500px;
height: 500px;
background-color: #000000;
position:absolute;
filter:Alpha(Opacity=100)
}
</style>

<body>
<div id="div_test" onmouseover="hid()"></div>

</body>

<script type="text/javascript">
var i = 100;
function $(id) {return document.getElementById(id);}
function chang_display() { i--;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+i+")";
div.style.opacity = i / 100;
if ( i== "0")
{document.getElementById('div_test').style.display="none";//隐藏
exit
}

}
function hid() {
setInterval(chang_display, 15);
}

</script>


												


											
css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；的更多相关文章
	

    
								
  1. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）
		
    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
    
		
    2. 
						
  2. ios获取相册图片   压缩图片
		
    从摄像头/相册获取图片 刚刚在上面的知识中提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. ...
    
		
    3. 
						
  3. ios中摄像头/相册获取图片压缩图片上传服务器方法总结
		
    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...
    
		
    4. 
						
  4. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题
		
    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...
    
		
    5. 
						
  5. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    6. 
						
  6. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform  2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
		
    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
    
		
    7. 
						
  7. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
		
    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
    
		
    8. 
						
  8. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
		
    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...
    
		
    9. 
						
  9. Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）
		
    Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. AppInventor学习笔记（五）——瓢虫快跑应用学习
			
    一.瓢虫引入 1:加入控件: 先引入方框中含有的控件,里面有两个画布,一个图像精灵,一个重力感应,一个时钟(设为10Ms).顺手改名.设置图像精灵的移动speed为10,并且引入瓢虫的图像 2.加入逻 ...
    
			
    2. 
						
  2. VMware Tools安装
			
    不是每一个程序员都必须玩过linux,只是博主觉得现在的很多服务器都是linux系统的,而自己属于那种前端也搞,后台也搞,对框架搭建也感兴趣,但是很多生产上的框架和工具都是安装在服务器上的,而且有不少 ...
    
			
    3. 
						
  3. HDU 4507 (鬼畜级别的数位DP）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4507 题目大意:求指定范围内与7不沾边的所有数的平方和.结果要mod 10^9+7(鬼畜の元凶) 解题 ...
    
			
    4. 
						
  4. 【BZOJ】2038: [2009国家集训队]小Z的袜子(hose)（组合计数+概率+莫队算法+分块）
			
    http://www.lydsy.com/JudgeOnline/problem.php?id=2038 学了下莫队,挺神的orzzzz 首先推公式的话很简单吧... 看的题解是从http://for ...
    
			
    5. 
						
  5. [BZOJ 4436][Cerc2015]Kernel Knights
			
    [Cerc2015]Kernel Knights Time Limit: 2 Sec Memory Limit: 512 MBSubmit: 5 Solved: 4[Submit][Status][D ...
    
			
    6. 
						
  6. BZOJ4011: [HNOI2015]落忆枫音
			
    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出 这样一个问题.  「相信吧.不然我们是什么,一团肉吗?要不是有灵魂……我们 ...
    
			
    7. 
						
  7. 设置TOMCAT的JVM虚拟机内存大小
			
    你知道如何设置TOMCAT的JVM虚拟机内存大小吗,这里和大家分享一下,JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会影响程序的性能. 设置 ...
    
			
    8. 
						
  8. Quartz将Job保存在数据库中所需表的说明
			
    http://blog.iqbon.com/doc/364.html   (将Quartz持久化到数据库的做法)   QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calen ...
    
			
    9. 
						
  9. for循环下九九乘法表
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    10. 
						
  10. IP地址在数据库里面的存储方式
			
    大多数公司的表结构都需要经过DBA进行审核,有时候你会看到存储IP地址采用varchar(15),这种方式都是传统的做法,这种方法需要占用15个字节,那么有更省空间的做法么?肯定是有的,那就是用int ...
    
			
    11.