导航栏悬停过渡鼠标悬停问题

Question

我在悬停上进行了过渡（当我在导航栏上悬停时，宽度变大并且主要内容在正确的位置上移动了一点）。但是不幸的是，主要内容在页面刷新上移动，我想避免这种情况。知道如何编码：mouseover过渡后效应吗？

.navbar:hover+main {
    margin-left: 10rem;
}

.navbar + main {
    transition: 1s;
}

它确实可以在小提琴上正常工作：http://jsfiddle.net/47d5ujym/ 不幸的是，无法在Opera，Chrome或Firefox上正常使用

Answer 1

尝试一下：

.navbar:hover+main {
    margin-left: 10rem;
}

.navbar + main {
    transition: all 1s ease;
}