开发者社区> 问答> 正文

元素的click和mouseover事件在兄弟结点间触发混乱。

多个兄弟结点,左右触发事件正常,垂直触发事件的时候,明明从兄弟1移动到快到兄弟3才触发兄弟2的事件

sass代码

    .frontPage {
            height:888px;
            width: 600px;
            left: 50%;
            transform: translateX(-50%);
            position: relative;
            text-align:center;
            top:-70px;
            .block {
                height: 150px;
                box-shadow:3px 3px 8px #525252;
                transition: all .4s ease;
                margin-top:20px;
                border:red 1px solid;
            }
            .block:hover{
                    transform:scale(1.2);
            }
    }

节点的截图
screenshot
screenshot

展开
收起
杨冬芳 2016-06-08 10:06:08 2212 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    chrome/safari/firefox下测试没有问题~~

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <style>
    
            .frontPage {
                height: 888px;
                width: 600px;
                left: 50%;
                transform: translateX(-50%);
                position: relative;
                text-align: center;
                top: -70px;
            }
            .block {
                height: 150px;
                box-shadow:3px 3px 8px #525252;
                transition: all .4s ease;
                margin-top:20px;
                border:red 1px solid;
            }
            .block:hover{
                transform:scale(1.2);
            }
    
        </style>
    </head>
    <body>
        <div class="frontPage">
            <div class="block" style="background-color: red"></div>
            <div class="block" style="background-color: #4a96d3"></div>
            <div class="block" style="background-color: #00a23f"></div>
        </div>
    </body>
    </html>
    
    2019-07-17 19:31:14
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载