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. GSON解析
			
    1.把GSON.jar包放到工程lib目录下并依赖 2.使用HiJSON工具格式化json字符串 2.创建对象类 public class MyNews { public News_Paramz pa ...
    
			
    2. 
						
  2. The Suspects   简单的并查集
			
    Description 严重急性呼吸系统综合症( SARS), 一种原因不明的非典型性肺炎,从2003年3月中旬开始被认为是全球威胁.为了减少传播给别人的机会, 最好的策略是隔离可能的患者. 在Not ...
    
			
    3. 
						
  3. 2016.6.11 ASP提交数据到SQL server数据乱码解决方法
			
    1.检查数据库排序规则 China-PRE-90-CS-AI 2.ASP文档中,写入数据的页面的编码和检查提交数据页面的编码一致:
    
			
    4. 
						
  4. js:语言精髓笔记4----面向对象概要与运算符二义性
			
    实例创建:obj = new contructor[(arguments)]; //如果没有参数可以忽略括号:所以注意这不是函数调用: 直接量与初始器:在之前的基本表达式中将直接量与初始器分开,这时因 ...
    
			
    5. 
						
  5. 简单几何(直线位置) POJ 1269 Intersecting Lines
			
    题目传送门 题意:判断两条直线的位置关系,共线或平行或相交 分析:先判断平行还是共线,最后就是相交.平行用叉积判断向量,共线的话也用叉积判断点,相交求交点 /********************* ...
    
			
    6. 
						
  6. Rain on your Parade
			
    Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Java/Ot ...
    
			
    7. 
						
  7. Android MVVM框架RoboBinding初探
			
    RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.MVVM模式是MVC模式的重要更新,使得项目结构更加的优美,易于维护以及方便 ...
    
			
    8. 
						
  8. overload和override的区别(转)
			
    overload和override的区别 override(重写) 1.方法名.参数.返回值相同.2.子类方法不能缩小父类方法的访问权限.3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出 ...
    
			
    9. 
						
  9. 在vs2013中配置openGL（绝对可靠  ！）
			
    首先要下载glut.h glut32.dll glut32.lib.(这个在glut-3.7.6-bin的包里面,可以直接下载 ) 然后: glut.h:放到 D:\vs2013\VC\include ...
    
			
    10. 
						
  10. zhcon安装过程记录
			
    参考资料: 1. http://www.linuxdiyf.com/viewarticle.php?id=81796 需要下载的文件有两个:zhcon-0.2.5.tar.gz和zhcon-0.2.5 ...
    
			
    11.