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

发布于
2016-02-18

多个兄弟结点，左右触发事件正常，垂直触发事件的时候，明明从兄弟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);
            }
    }

节点的截图

错误状态图，鼠标位置在画圈圈位置，但是mouseover事件没有切换到div2块，不懂为什么！

如果由下到上事件也能触发，而且没有问题，从上到下不知道为什么不可以！！！

css javascript

html5

阅读 4.1k

2 个回答

得票最新

kikong

19.1k21320

发布于
2016-02-18

✓ 已被采纳

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>