Question

HTML

<div class="container">
    <div class="cardItem">
         <h1>Mouse over me</h1>

        <p>Keep moving the mouse during transition</p>
        <p>Also have the mouse still over where the new
            paragraph will come before the transition finishes</p>
        <div class="cardHoverSide">
            <p>See if my hover state still
                fires despite your <span>crazy</span> mouse movements</p>
            <div class="cardItem">NestedCard With Hover!</div>
        </div>
    </div>
</div>

CSS

    .container {
    overflow: hidden;
    height: 17em;
    width: auto;
}
.cardItem {
    position: relative;
    float: left;
    margin: 0 .35em;
    border: none;
    background: #444;
    color: #eee;
    width: 10em;
    height: 17em;
    -moz-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
    -o-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
    -webkit-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
    transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
}
.cardHoverSide .cardItem {
    width: 60%;
    height: 50%;
}
.cardHoverSide .cardItem:hover {
    background: #eee;
    color: #222;
    transform: initial;
}
.cardItem:hover {
    -moz-transform: translate(0, -17em);
    -ms-transform: translate(0, -17em);
    -o-transform: translate(0, -17em);
    -webkit-transform: translate(0, -17em);
    transform: translate(0, -17em);
    -moz-transition: transform .3s cubic-bezier(1, .01, 1, .41);
    -o-transition: transform .3s cubic-bezier(1, .01, 1, .41);
    -webkit-transition: transform .3s cubic-bezier(1, .01, 1, .41);
    transition: transform .3s cubic-bezier(1, .01, 1, .41);
}
.cardHoverSide {
    border: none;
    background: #eee;
    color: #444;
    width: inherit;
    height: inherit;
    position: absolute;
    bottom: -17em;
}
.cardHoverSide p span:hover {
    color: red;
}
h1, h2, p {
    margin: .5em .3em;
    padding: 0;
}

我希望只要鼠标悬停在该元素上，就会触发每个嵌套元素的悬停状态。例如，当您在嵌套卡的空白区域中移动鼠标时，它似乎不会始终一致地触发悬停状态。

嵌套的span标签也有一些问题...不知道我是否错误地设置了CSS /没有最佳实践 - 或者我是否需要使用JS来触发它。

感谢阅读！非常感谢所有帮助。

Edit Updated fiddle

我特别感兴趣的是鼠标在启动过渡后静止不动 - 看起来在Chrome上，悬停状态不会触发子元素（所以在小提琴中，p标签或嵌套面板不会改变状态）。我已经能够在更新的小提琴上不断重复这种行为。

嵌入元素在转换期间/之后不会触发其悬停状态

0 个答案: