前端，鼠标移上div实现悬浮效果，移出消失

逃离我推掉我的手 2023-06-16 08:11 13阅读 0赞

自己做的样式，保存下来以免以后使用并分享出来，如果不适合你，请不要吐槽

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]                 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1][]

实现：

1、html代码

<div @mouseenter="enter()" @mouseleave="leave()" id="div1">
    	<p>待确认</p>
    	<p>0</p>
    </div>

2、js代码

enter(){
    	document.getElementById('div1').style.backgroundColor='#F7F7F7';
    	document.getElementById('div1').style.boxShadow='2px 2px 2px #4285F4'
    },
    leave(){
    	document.getElementById('div1').style.backgroundColor='#ffffff';
    	document.getElementById('div1').style.boxShadow=''
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125155659803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125155726580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 113 阅读

相关前端，鼠标移上div实现悬浮效果，移出消失

自己做的样式，保存下来以免以后使用并分享出来，如果不适合你，请不要吐槽效果如下 ![watermark_type_ZmFuZ3poZW5n

逃离我推掉我的手/ 2023年06月16日 08:11/ 0 赞/ 14 阅读

相关 php 中鼠标移上,如何使用CSS实现鼠标上移图标旋转的效果

这篇文章主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，比如： ![a8c7eb9c430

不念不忘少年蓝@/ 2022年10月21日 04:58/ 0 赞/ 197 阅读

相关 jquery鼠标移上div切换

样式： .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:a

偏执的太偏执、/ 2022年07月21日 02:17/ 0 赞/ 198 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

我不是女神ヾ/ 2022年07月12日 02:46/ 0 赞/ 751 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

淩亂°似流年/ 2022年07月12日 02:46/ 0 赞/ 337 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 706 阅读

相关 vue实现鼠标移入移出显示或者隐藏div

我的qq 2038373094 效果如下 ![2019050714084878.gif][] -------------------- html代码

叁歲伎倆/ 2022年02月04日 09:23/ 1 赞/ 1812 阅读

相关通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现

通过jquery实现鼠标移入移出效果鼠标移入用mouseover方法鼠标移出用mouseout方法但是，jquery给我们提供了一个复合事件替换mouseover

太过爱你忘了你带给我的痛/ 2021年12月11日 09:45/ 0 赞/ 865 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 452 阅读