开发者社区> 问答> 正文

JS 编程,onmouseover 图片变模糊问题?报错

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">


var img =document.getElementById("img");


function setover(abc){                    
 abc.style['opacity'] = 0.5;
 abc.style['filter'] = 'alpha(opacity=50)';
};


function setout(abc){                 
 abc.style['opacity'] = 1;
 abc.style['filter'] = 'alpha(opacity=100)';
};


img.addEventListener("mouseover",function setover(abc),false);
img.addEventListener("mouseout",function setout(abc),false);      

                                                                 

</script>


</head>
<body>
<ul id="imagegallery">
<li><img id="img" src="人物a.jpg"></li>
</ul>
</body>
</html>






function moveover(){


var img =document.getElementById("img");


function setover(abc){                    
 abc.style['opacity'] = 0.5;
 abc.style['filter'] = 'alpha(opacity=50)';
};


function setout(abc){                 
 abc.style['opacity'] = 1;
 abc.style['filter'] = 'alpha(opacity=100)';
};


img.addEventListener("mouseover",function setover(abc),false);
img.addEventListener("mouseout",function setout(abc),false);



在Chrome 浏览器上 显示的报错是Uncaught SyntaxError: Unexpected token ,。

我想做到html 与JS 完全分离,但是遇到瓶颈,求大神帮帮忙!另外小弟今年4月22日自学代码 html→CSS→JS ,大神们有什么好书推荐


展开
收起
爱吃鱼的程序员 2020-06-14 16:01:13 453 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    不需要这么复杂的实现,只需要CSS中的hover伪类就可以实现了

    #img{opacity:1filter:alpha(opacity=100)}#img:hover{opacity:0.5filter:alpha(opacity=50)}



    确实,能用CSS解决就不用JS。js脚本放在对象后面试试 <!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><imgid="img"src="http://www.oschina.net/img/logo_s2.png"></body></html><scripttype="text/javascript">varimg=document.getElementById("img");functionsetover(){this.style['opacity']=0.5;this.style['filter']='alpha(opacity=50)';};functionsetout(){this.style['opacity']=1;this.style['filter']='alpha(opacity=100)';};img.addEventListener("mouseover",setover);img.addEventListener("mouseout",setout);</script>



    引用来自“JasonWcx”的评论

    不需要这么复杂的实现,只需要CSS中的hover伪类就可以实现了

    #img{opacity:1filter:alpha(opacity=100)}#img:hover{opacity:0.5filter:alpha(opacity=50)}



    2020-06-14 16:01:28
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载