利用css3和js原生实现鼠标移入移出模块透明度的变化

html布局   <div class="main" id="main"></div>

对应的css样式  .main{width: 200px;height: 200px;background: red;
                       margin: 45px auto;opacity: 0.3;transition: opacity 0.5s ease-in;}

一：利用css3实现该效果

.mai:hover{opacity: 1;}

二：利用js原生实现

div=document.getElementById('main')
div.onmouseover=function(){
this.style.opacity=1
}
div.onmouseout=function(){
this.style.opacity=0.3
}