zoukankan      html  css  js  c++  java
  • css 解决盒子移动鼠标丢失产生的抖动问题

    例如:

    一个div,鼠标悬浮希望div上移,鼠标离开div归位。

    如果直接给div添加hover事件,div会上下抖动。

    解决方法是给div添加一个父元素:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> 
            * {
                padding: 0;
                margin: 0;
            }
            .box-in {
                background-color: blue;
                width: 100px;
                height: 100px;
                transition: 1s all;
                position: absolute;
                left: 0;
                top: 0;
            }
            .box:hover .box-in{
               top: -50px;
            }
            .box {
                width: 100px;
                height: 100px;
                margin: 200px auto;  
                position: relative; 
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-in"></div>
        </div>
        
    </body>
    </html>
  • 相关阅读:
    2018-8-10-win10-uwp-重启软件
    jquery动画滑入滑出
    jquery类操作
    jquery类操作
    jquery手风琴
    jquery突出显示
    jquery隔行变色
    jquery下拉菜单
    jquery筛选选择器
    jquery过滤选择器
  • 原文地址:https://www.cnblogs.com/fyj-web-18/p/9579058.html
Copyright © 2011-2022 走看看