展开全部
原理就是制作两套样式,分别运用在鼠标放上和拿开的时候,比如楼下的同学说的:
1 2 | img {opacity:0.8;filter(alpha=80)} img:hover {opacity:1;filter(alpha=100)} |
但是用透明度的方法似乎没有变亮,变暗的效果。
建议可以在图片上加一个层来控制:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> < html > < head > < meta charset = 'utf-8' /> < title >JS Bin</ title > < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></ script > < style > #tabbox{ width: 300px; height: 300px; position: relative;} .imgbg{width: 300px; height: 300px; top: 0; left: 0; position: absolute; background: #000; opacity:0;filter(alpha=0)} .imgbg:hover{ opacity:0.5;filter(alpha=50)} </ style > </ head > < body > < div id = "tabbox" > < img src = "/6rooms/html/img/1.jpg" alt = "" > < div class = "imgbg" ></ div > </ div > </ body > </ html > |
希望能帮到你!
本回答被提问者采纳
展开全部
加hover的CSS即可。
img {opacity:0.8;;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}
img {opacity:0.8;;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}
展开全部
1 2 3 4 | img:hover { opacity: 0.7 ; filter:alpha(opacity= 70 ); } |
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |