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. 驱动模式使用__try __excpet
			
    内核模式下判断内存可读可写(下面两个函数是判断ring3的内存.我也搞不懂有啥用) VOID ProbeForRead( IN CONST VOID *Address, IN SIZE_T Lengt ...
    
			
    2. 
						
  2. C#学习笔记（四）——变量的更多内容
			
    一.类型转换 1.转换的类型 2.隐式转换 bool 和string 没有隐式转换,具有隐式转换的都列在下面的表格 . 记住一个规律,就是由精度低的类型转到精度高的类型是很容易的. 3.显式转换 (1 ...
    
			
    3. 
						
  3. python reduce()函数
			
    reduce()函数 reduce()函数也是Python内置的一个高阶函数.reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传 ...
    
			
    4. 
						
  4. 2016.6.11 ASP提交数据到SQL server数据乱码解决方法
			
    1.检查数据库排序规则 China-PRE-90-CS-AI 2.ASP文档中,写入数据的页面的编码和检查提交数据页面的编码一致:
    
			
    5. 
						
  5. Xamarin.iOS编译时无法连接苹果系统
			
    Xamarin.iOS编译时无法连接苹果系统   错误信息:Unable to connect to Address=’***.***.***.***’ with User=’***’   即使Vis ...
    
			
    6. 
						
  6. json学习系列（4）-JSONString对象的optXXX方法的使用
			
    在JSONObject获取value有多种方法,如果使用 getXxx()类型的方法获取value,如getString("key").如果key不存在的话,这些方法无一例外的都会 ...
    
			
    7. 
						
  7. spring实战三装配bean之Bean的作用域以及初始化和销毁Bean
			
    1.Bean的作用域 所有的spring bean默认都是单例.当容器分配一个Bean时,不论是通过装配还是调用容器的getBean()方法,它总是返回Bean的同一个实例.有时候需要每次请求时都获得 ...
    
			
    8. 
						
  8. maven自动化部署插件sshexec-maven-plugin
			
    在maven pom.xml 文件plugins里增加               <plugin>                 <groupId>com.github.g ...
    
			
    9. 
						
  9. BZOJ4347 : [POI2016]Nim z utrudnieniem
			
    将石子从小到大排序,然后DP. 设$f[i][j][k]$表示考虑了前$i$堆的石子,当前扔掉的堆数模$d$为$j$,没有扔掉的石子的异或和为$k$的方案数. 因为石子排过序,所以转移的复杂度为$O( ...
    
			
    10. 
						
  10. Linux redirect the stdout to a file
			
      1: int save_out = dup(fileno(stdout));//backup stdout 2: int out = open("cout.log", O_RD ...
    
			
    11.