CSS模拟的网页开关灯效果
纯css模拟网页上的开关灯效果，另外兼容IE6等浏览器，一款不错的类似于网页关灯效果的示例代码，我们或许经常会在网页播放器的周围发现这种特效，鼠标放上的时候，就像开灯了一样，图片高亮，鼠标移走了，则就暗下来了。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE html>
<html>
<head>
<title>CSS模拟的开关灯效果</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;font-size:12px;list-style:none;border:0;-webkit-transition:opacity .2s ease-out;}
body{margin:30px;}
ul{background:url(/jscss/demoimg/201207/T1HH1oXexDXXXXXXXX-190-300.png) no-repeat left top;width:190px;height:300px; float:left;}
ul li{float:left;position:relative;width:95px;height:30px;}
ul li a{position:absolute;text-indent:-9999px;display:block;width:95px;height:30px;top:0;left:0;overflow:hidden;outline:none;}
.floorMain{float:left;background-color:#000;width:390px;}
.floorMain:hover a{opacity:0.7;filter:alpha(opacity='70');}
.floorMain a{float:left;line-height:0;}
.floorMain a:hover{opacity:1;filter:none;}
</style>
</head>
<body>
<div style="width:970px;">
<ul>
<li><a href="#">dior</a></li>
<li><a href="#">雅漾</a></li>
<li><a href="#">露得清</a></li>
<li><a href="#">施华蔻</a></li>
</ul>
<div class="floorMain">
<a href="#"><img src="/jscss/demoimg/201207/T11YWoXdhSXXXXXXXX-195-300.jpg" /></a>
<a href="#"><img src="/jscss/demoimg/201207/T17KanXa8cXXXXXXXX-195-150.jpg" /></a>
<a href="#"><img src="/jscss/demoimg/201207/T1sVCoXaNxXXXXXXXX-195-150.jpg" /></a>
</div>
</div>
</body>
</html>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思