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. ios获取相册图片 压缩图片

    从摄像头/相册获取图片 刚刚在上面的知识中提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. ...

  3. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  4. WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  5. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  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. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  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. Discuz!图片查看插件(支持鼠标缩放、实际大小、旋转、下载)

    Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...

随机推荐

  1. RequiredFieldValidator 控件 CompareValidator 控件

    RequiredFieldValidator 控件 验证关联控件非空 ControlToValidate 属性用来关联被验证控件 ErrorMEssage 触发控件后显示的错误信息 CompareVa ...

  2. sssssssss

    构造函数new A 和new A()的区别,都是A类的实例化,后者可以向构造函数传参数. a=f(),指向window a=new f()指向当前函数的实例. Return b和return b()区 ...

  3. Codeforces Round #294 (Div. 2)

    水 A. A and B and Chess /* 水题 */ #include <cstdio> #include <algorithm> #include <iost ...

  4. java生成字符串md5函数类

    import java.security.MessageDigest; /** * Md5 工具 */ public class Md5Util { private static MessageDig ...

  5. HDU2167 Pebbles(状压DP)

    题目给一张n×n的格子,每个格子都有数字,要从格子中取若干个数字,八个方向相邻的数字不能一起取,问取的数字最大和是多少. 从第一行一行一行看下去,可以发现第1行取哪几列只会影响到第2行,第3行后面的一 ...

  6. 如何:从代码创建 UML 类图(ZZ)

      您拖动的一个或多个类将显示在关系图上. 它们依赖的类将显示在"UML 模型资源管理器"中. 参见 模型表示类型的方式. 将程序代码中的类添加到 UML 模型 打开一个 C# 项 ...

  7. BZOJ3743 : [Coci2014]Kamp

    d[x][0]表示x点向下走且回到x点的最少代价 d[x][1]表示x点向下走但不回到x点的最少代价 d[x][2]表示x点向下走的最长路 d[x][3]表示x点向下走的次长路 u[x][0]表示x点 ...

  8. 李洪强 - C语言8-Scanf函数

    C语言的scanf函数 一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位 每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...

  9. 【C语言】12-指向一维数组元素的指针

    一.用指针指向一维数组的元素 1 // 定义一个int类型的数组 2 int a[2]; 3 4 // 定义一个int类型的指针 5 int *p; 6 7 // 让指针指向数组的第0个元素 8 p ...

  10. iOS开发之UITextField的使用详解

    UITextField的使用详解 UITextField控件是开发中,使用频率比较高的控件了,那么有必要总结一下. 一.UITextField手动编写控件 UITextField  *txtAccou ...