JS学习笔记 | 鼠标经过时的css效果

一、效果

鼠标经过时的效果：

效果一：整体颜色变化变深

效果二： 出现边缘选中框

二、jsp+css实现

效果一：

<style>
    .onclick:active{border:1.5px solid #796FFF; }
</style>									  
<img 
     style="background:#ff9999" width="120" height="50" class="onclick" id="color1" value="红色" 
     onmouseover="this.style.backgroundColor='#ff6666';"
     onmouseout="this.style.backgroundColor='#ff9999';"
/>		

效果二：

<style>
   .onclick:active{border:1.5px solid #796FFF; }
</style>
<img src="images/pic1.jpg" width="120" height="85" class="img-thumbnail onclick" id="pic1" 
     onmouseover="this.style.backgroundColor='lightblue';" 
     onmouseout="this.style.backgroundColor='';"/>