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. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（五）
			
    25. 安装 Linux Malware Detect (LMD) Linux Malware Detect (LMD) 是 GNU GPLv2 协议下发布的开源 Linux 恶意程序扫描器,它是特别 ...
    
			
    2. 
						
  2. spark streaming中使用flume数据源
			
    有两种方式,一种是sparkstreaming中的driver起监听,flume来推数据:另一种是sparkstreaming按照时间策略轮训的向flume拉数据. 最开始我以为只有第一种方法,但是尼 ...
    
			
    3. 
						
  3. 全自动编译FFmpeg(含x264，fdk aac，libmp3lame，libvpx等第3方库)
			
    需要修改 #存放下载的源代码目录compile_dir=/root/ffmpeg_compile #库文件安装目录prefix_dir=/mnt/third-party 运行方法: source ce ...
    
			
    4. 
						
  4. CAD 快捷键Ctrl+2   Ctrl+3
			
    今天用cad,学习了两个快捷键,第一个Ctrl+2,打开如下 第二个是Ctrl+3,打开如下:
    
			
    5. 
						
  5. MVC 使用HandleErrorAttribute统一处理异常
			
    HandleErrorAttribute继承自FilterAttribute,且实现了IExceptionFilter接口. 属于AOP思想的一种实现,MVC的四大筛选器(权限,动作,结果,异常)中的 ...
    
			
    6. 
						
  6. UVa1401 Remember the Word（DP+Trie树）
			
    题目给定一个字符串集合有几种方式拼成一个字符串. dp[i]表示stri...strlen-1的方案数 dp[len]=1 dp[i]=∑dp[j](stri...strj-1∈SET) 用集合的字符 ...
    
			
    7. 
						
  7. 神、上帝以及老天爷[HDU2048]
			
    神.上帝以及老天爷 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...
    
			
    8. 
						
  8. BZOJ4347 : [POI2016]Nim z utrudnieniem
			
    将石子从小到大排序,然后DP. 设$f[i][j][k]$表示考虑了前$i$堆的石子,当前扔掉的堆数模$d$为$j$,没有扔掉的石子的异或和为$k$的方案数. 因为石子排过序,所以转移的复杂度为$O( ...
    
			
    9. 
						
  9. jquery插件 源码
			
    下面是对Jquery几个经常用到的地方进行的增强. 功能是参考百度七巧板JS框架来完成的. 一.页面属性 $.page.getHeight():获取页面高度 $.page.getWidth():获取页 ...
    
			
    10. 
						
  10. 命令模式坚决svn树冲突（local unversioned, incoming add upon update）
			
    当工作目录修改删除过时更新使用svn更新就容易发生树冲突“Tree Confilict”.会出现类似提示. local unversioned, incoming add upon update 如果 ...
    
			
    11.