鼠标经过图片变暗代码(鼠标经过图片周围变暗)
admin 发布:2022-12-19 17:29 122
今天给各位分享鼠标经过图片变暗代码的知识,其中也会对鼠标经过图片周围变暗进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、淘宝里鼠标放在图片上,图片变亮,这个效果怎么制作(代码是什么)?
- 2、在dreamweaver中,怎么实现鼠标移动到一张图片上,该图片由暗变亮?
- 3、css怎么实现鼠标移入img变暗
- 4、淘宝自定义模块鼠标经过图片变亮其他图片变暗代码,类似天猫商城首页,http://www.5icool.org/a/201204/
- 5、CSS鼠标经过图片变亮,移开变变暗效果代码怎么写
- 6、鼠标点击DIV时,如何使DIV背景图片变暗?
淘宝里鼠标放在图片上,图片变亮,这个效果怎么制作(代码是什么)?
这个应该是鼠标放上去图片切换效果(也就是说要两张图片切换)
需要在页面中添加以下JS代码:
script language="javascript"
function changeImg(obImg,sNewURL)
{
if(sNewURL!="") obImg.src=sNewURL;
}
/script
将需要切换图片的标签代码按照以下示例编写,将以下代码的"图片地址"更换为自己所要切换的图片就可以了。
img style="cursor:hand;" src="图片地址" border="0" width="50" height="30" onmouseover="changeImg(this,'图片地址');" onmouseout="changeImg(this,'图片地址');"
在dreamweaver中,怎么实现鼠标移动到一张图片上,该图片由暗变亮?
一. 可以用同一张图片, 通过滤镜, 变成灰色或恢复彩色
代码示例(示例图片为test.jpg):
style
.viewcolor{}
.viewgray{filter:gray(enable)}
/style
img src="test.jpg" class=viewgray onmouseout="this.className='viewgray'" onmouseover="this.className='viewcolor'"
二. 用不同的图片, 当鼠标移上或移开时, 切换不同图片, 这种方式更灵活些, 因为两张图片可以完全自定义.
代码示例(test1.jpg是暗图片,test2.jpg是亮图片):
img src="test1.jpg" onmouseout="this.src='test1.jpg'" onmouseover="this.src='test2.jpg'"
css怎么实现鼠标移入img变暗
style
.bg{
width:200px;
height:100px;
background:url(bottom_bg.jpg);
}
a{
display: block;
width:100%;
height:100%;
}
a:hover{
filter:alpha(opacity=80);
background:#000;
opacity:0.5;
}
/style
div class="bg"a href="#"/a/div
用css实现了。。。不过没有渐变效果,要做的话需要js
淘宝自定义模块鼠标经过图片变亮其他图片变暗代码,类似天猫商城首页,http://www.5icool.org/a/201204/
!DOCTYPE html
html
head
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([url][/url]) 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
lia href="#"dior/a/li
lia href="#"雅漾/a/li
lia href="#"露得清/a/li
lia href="#"施华蔻/a/li
/ul
div class="floorMain"
a href="#"img src="" //a
a href="#"img src="" //a
a href="#"img src="" //a
/div
/div
/body
/html
CSS鼠标经过图片变亮,移开变变暗效果代码怎么写
1、打开hbuilder,在空白的html文件上面设置一个div,给div一个class并命名为img:
2、在css里设置img的类一定的宽和高,引入示例图片,设置图片为不重复。并且给img的类设置“:hover”伪类,设置伪类内的透明度为0.6:
3、打开浏览器,在浏览器内查看效果:
4、将鼠标移入图片,就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮,移开变变暗效果的演示:
鼠标点击DIV时,如何使DIV背景图片变暗?
方法一: 用CSS a 伪类控制:把原始背景图作为a的背景图,另用PS做一个变暗后的背景图
a{background:url(原始背景图路径) no-repeat;}
a:hover{background:url(变暗后背景图路径) no-repeat;}/*鼠标经过变换背景图 也可以只用底色如:background:#000;*/
方法二:用Jquery,仍然是变换两个背景图片。
$('#project').toggle(function(){this.css(background,'背景图路径‘)},function(){this.css(background,'变暗背景图路径‘)}})
方法二为点击DIV变换背景。呵,不太明白这样做的确切意图,如果是为了突出链接,只需用a伪类hover变换就行了。因为"点击"外div没有什么意义。如果是"点击"链接,页面己经跳转,是看不到效果的。
鼠标经过图片变暗代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于鼠标经过图片周围变暗、鼠标经过图片变暗代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-03网页切换图片代码(网页图片切换怎么做)[20240503更新]
- 05-03jquery网站代码(jquery操作html代码)[20240503更新]
- 05-03matlab代码自动排版(matlab自动排版快捷键)[20240503更新]
- 05-03点击图片翻页代码(图片自动翻页)[20240503更新]
- 05-03matlab锐化代码(matlab自己编写锐化函数)[20240503更新]
- 05-03输入日期显示是否的代码(显示当前时间和日期的代码)[20240503更新]
- 05-03移动省份代码(移动归属省代码)[20240503更新]
- 05-03图书管理系统的图书添加php代码(图书管理系统的图书添加php代码)[20240503更新]
- 05-03上下浮动图片代码(向上浮动代码)[20240503更新]
- 05-03排行js代码(js百大榜单)[20240503更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接