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

最新推荐文章于 2024-06-01 17:33:11 发布

cungudafa

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量285

点赞数 1

分类专栏： # JavaScript Java前后端开发学习文章标签： js+css效果鼠标经过时标签效果

本文链接：https://blog.csdn.net/cungudafa/article/details/88557003

版权

Java前后端开发学习同时被 2 个专栏收录

58 篇文章 5 订阅

订阅专栏

JavaScript

14 篇文章 1 订阅

订阅专栏

一、效果

鼠标经过时的效果：

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

在这里插入图片描述
效果二：出现边缘选中框

二、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='';"/>