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

小杰问问题 发布于 2015/05/14 16:35
阅读 366
收藏 0
<!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 ,大神们有什么好书推荐


加载中
0
JasonWcx
JasonWcx

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

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



小杰问问题
确实 , 能用CSS解决就不用JS 。
0
梦想岛
梦想岛
js脚本放在对象后面试试
0
梦想岛
梦想岛
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <img id="img" src="http://www.oschina.net/img/logo_s2.png">
    
    </body>
    </html>
    <script type="text/javascript">
        var img =document.getElementById("img");

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

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

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

    </script>



0
小杰问问题

引用来自“JasonWcx”的评论

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

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



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

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