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. 关于phpstudy安装的问题
			
    1.最常见的就是80端口冲突.如果是安装在服务器的话,有些服务器已经默认安装了iis,所以会有冲突.关闭iis即可. 2.明明装了vc9运行库,但错误还是不行.如果你是整个项目copy过来的,可能就会 ...
    
			
    2. 
						
  2. Xamarin.Android编译提示找不到mscorlib.dll.so文件
			
    Xamarin.Android编译提示找不到mscorlib.dll.so文件 错误信息:AOT module ‘mscorlib.dll.so’ not found: Cannot load lib ...
    
			
    3. 
						
  3. WireShark数据包分析数据封装
			
    WireShark数据包分析数据封装 数据封装(Data Encapsulation)是指将协议数据单元(PDU)封装在一组协议头和尾中的过程.在OSI七层参考模型中,每层主要负责与其它机器上的对等层 ...
    
			
    4. 
						
  4. Properties类的用法
			
    在java.util包下面有一个类Properties,该类主要用于读取以项目的配置文件(以．properties结尾的文件和xml文件). 一. Properties结构 类继承结构如下: clas ...
    
			
    5. 
						
  5. Count the string[HDU3336]
			
    Count the string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...
    
			
    6. 
						
  6. (转)js:字符串(string)转json
			
    第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
    
			
    7. 
						
  7. Genymotion填坑之路
			
    Genymotion是一款android的模拟器,之前用的一台电脑直接装上就可以用,后来换了一台机器,一直报获取不到IP,后来网上各种找方法,偶然发现网上说的是硬件问题: 在BIOS中将CPU的vir ...
    
			
    8. 
						
  8. ArcEngine开发：IElement.Geometry 值不在预期范围内 + 元素绘制代码
			
    IElement pEle = pLineEle as IElement; pEle.Geometry = pLn; pLn为一个ILine对象,想当然的以为它是IGeometry对象,可以赋值,结果 ...
    
			
    9. 
						
  9. ArcEngine开发 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
			
    if(pFeature!=null) { IPoint pnt = pFeature.Shape as IPoint; pntArray.Add(pnt); } 调试是pntArray.Add(pnt ...
    
			
    10. 
						
  10. 对于默认 Windows NT 安装的 SID 值
			
    https://support.microsoft.com/en-us/kb/163846/zh-cn
    
			
    11.