返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何解决css中hover做遮盖罩闪动的问题
  • 739
分享到

如何解决css中hover做遮盖罩闪动的问题

2024-04-02 19:04:59 739人浏览 八月长安
摘要

这篇文章主要介绍如何解决CSS中hover做遮盖罩闪动的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<div id="div2&qu

这篇文章主要介绍如何解决CSS中hover做遮盖罩闪动的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体代码如下所示:

<div id="div2"></div>
<div id="div3">
<p>你好</p>
</div>

这是html代码部分,原本想做一个遮盖罩的效果,当鼠标移动到div2的时候,div3会出现微微遮一下div2.

所以最开始的css代码是这样的

如何解决css中hover做遮盖罩闪动的问题

做完后发现出了一个问题,那就是鼠标移动到div2的时候div3会不停的闪烁。这并不是我想要的效果,于是我去找了很多资料,终于找到了原因

原来,当鼠标移动到div2的时候,div3会出现,这样鼠标就会在div3上,而不是在div2上面。于是div2又会消失,如此反复。

解决方法也很简单,将div2:hover代码换成如下就能完美解决了。

如何解决css中hover做遮盖罩闪动的问题

最终效果如下                                        

如何解决css中hover做遮盖罩闪动的问题                                          如何解决css中hover做遮盖罩闪动的问题

以上是“如何解决css中hover做遮盖罩闪动的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 如何解决css中hover做遮盖罩闪动的问题

本文链接: https://lsjlt.com/news/73008.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何解决css中hover做遮盖罩闪动的问题
    这篇文章主要介绍如何解决css中hover做遮盖罩闪动的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<div id="div2&qu...
    99+
    2024-04-02
  • CSS3如何为背景图设置遮罩并解决遮罩样式继承问题
    这篇文章主要介绍了CSS3如何为背景图设置遮罩并解决遮罩样式继承问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。工作中很多时候需要对图片背景作处理,比如设置通透性,模糊处理...
    99+
    2023-06-08
  • 如何解决jQuery的hover事件在IE中不停闪动的问题
    这篇文章主要为大家展示了“如何解决jQuery的hover事件在IE中不停闪动的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决jQuery的hove...
    99+
    2024-04-02
  • 如何解决layer弹层遮罩挡住窗体的问题
    这篇文章主要介绍如何解决layer弹层遮罩挡住窗体的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用代码:<div>    <d...
    99+
    2024-04-02
  • 如何解决DIV层被Flash或表单遮盖问题
    本篇文章给大家分享的是有关如何解决DIV层被Flash或表单遮盖问题,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在网页制作中,如果遇到DIV...
    99+
    2024-04-02
  • 如何解决Vue开发中对话框被遮罩层挡住的问题
    这篇文章将为大家详细讲解有关如何解决Vue开发中对话框被遮罩层挡住的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在Vue的开发中,一旦我们用到对话框,经常出现的问题...
    99+
    2024-04-02
  • 如何解决eclipse启动闪退问题
    这篇文章主要讲解了“如何解决eclipse启动闪退问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决eclipse启动闪退问题”吧! 问题描述: 关闭Eclipse时没有反...
    99+
    2023-06-03
  • 如何解决hover在IE6下的问题
    这篇文章给大家分享的是有关如何解决hover在IE6下的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。hover在IE6下的问题在处理CSS的机制上,IE总是有很多让人吐血的...
    99+
    2024-04-02
  • css中如何解决绝对定位元素被遮挡的问题
    这篇文章主要介绍css中如何解决绝对定位元素被遮挡的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体方法如下:ie7下绝对定位元素即使z-index值很高,如果其设置相对定位的...
    99+
    2024-04-02
  • 如何解决ie6中select无法被div遮盖的bug
    这篇文章主要介绍如何解决ie6中select无法被div遮盖的bug,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列...
    99+
    2023-06-08
  • 如何解决boostrap中modal闪现问题
    这篇文章将为大家详细讲解有关如何解决boostrap中modal闪现问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。此处闪现场景是,修改和新增用的一个js方法,最终都调用$('#modalRow...
    99+
    2023-06-09
  • css如何解决font-weight:blod跳动的问题
    小编给大家分享一下css如何解决font-weight:blod跳动的问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!需求:实现鼠标悬停在链接上时,链接字体加粗的功能。实现方式1:a:h...
    99+
    2024-04-02
  • 如何解决IE6下伪类hover失效的问题
    如何解决IE6下伪类hover失效的问题,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。第一篇:在处理CSS的机制上,拿对伪类:hover的...
    99+
    2024-04-02
  • CSS中如何解决越界的问题
    这期内容当中小编将会给大家带来有关CSS中如何解决越界的问题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。CSS相关知识(1)如何解决父元素的第一个子元素的margin-...
    99+
    2024-04-02
  • 如何解决css中的匹配问题
    这篇文章主要介绍了如何解决css中的匹配问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。问题描述众所周知在写 css的时候,会根据html 中类的定义或者 id 的定义来写...
    99+
    2023-06-08
  • 如何解决点击 tomcat9.exe闪退的问题
    有读者联系问,怎么tomcat启动都会出现问题,刚下载完还没开始操作。在这里说下怎么解决这个问题。 一、 问题描述 双击执行 startup.bat 可以正常启动,接着启动 tomc...
    99+
    2024-04-02
  • 如何解决vue渲染时闪烁{{}}的问题
    这篇文章主要介绍如何解决vue渲染时闪烁{{}}的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的...
    99+
    2024-04-02
  • vue如何解决文本框被键盘遮住的问题
    小编给大家分享一下vue如何解决文本框被键盘遮住的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:我把它写成了组件主...
    99+
    2024-04-02
  • firefox中div重叠覆盖之前ul的问题如何解决
    这篇文章主要介绍“firefox中div重叠覆盖之前ul的问题如何解决”,在日常操作中,相信很多人在firefox中div重叠覆盖之前ul的问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • 大数据中如何解决仓库无线覆盖的问题
    本篇文章为大家展示了大数据中如何解决仓库无线覆盖的问题,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。   仓库是每个企业不可缺少的一部分。现在仍有许多仓库管理人员没有意识到WiF...
    99+
    2023-06-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作