jquery - mouseover在div的上一个（默认）位置时触发mouseover（）

Question

我有这个javascript：

var main = function() {
    $('.button').mouseover(function() {
        $(this).fadeTo('fast', 1);
    });

    $('.button').mouseleave(function() {
        $(this).fadeTo('fast', 0.5);
    });
}

$(document).ready(main);

和这个css：

div {
    position: relative;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);

    height: 120px;
    width: 240px;

    background-color: #6699ff;
    border: 10px groove gray;
    border-radius: 15px;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 3em;
    color: white;
    opacity: 0.5;
}

当鼠标悬停在当前div位置和“默认”div位置时，mouseover事件会触发，我不明白为什么。

编辑： 似乎这个问题的原因是“display：table-cell;”。当显示设置为this时，“mouseenter（）”方法和“：hover”方法都会出现问题。我使用table-cell显示将div中的文本居中，所以任何解决方案都会受到欢迎。