css - 过渡和转换行为仅第一次有效

Question

我有一个简单的 HTML CSS 页面，其中有 10 个圆圈，当我将鼠标悬停在一个圆圈上时，它会移动到页面的右侧并显示写在上面的数字。一切都由CSS 转换和转换属性完成。

trasition 仅适用于第一个圆圈悬停且仅一次（即使在 codepen 和 SO 内置代码面板中的行为也不同），之后，如果我们将鼠标悬停到下一个圆圈，它会继续转换，但在给定间隔后不会停留。

它有时只适用于偶数圈，有时适用于所有人。

有什么问题以及如何解决？

* {
    margin: 0;
    padding: 0;
}
:root {
    --bg-color: #454678;
    --color__1: salmon;
    --color__2: lightskyblue;
    --color__3: khaki;
    --color__4: thistle;
    --color__5: mediumturquoise;
}

body {
    background-color: indianred;
}

.container {
    display: -ms-grid;
    display: grid;
    grid-template-rows: 2em auto;
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "main";
    grid-gap: 2px;
    background-color: white;
    justify-content: safe left;
    align-content: center;
}

header {
    grid-area: header;
}
main {
    display: grid;
    grid-area: main;
    grid-template-columns: auto;
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 10px;
    justify-items: start;
    align-content: center;
    padding: 10px;
}

.circle {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    background-color: var(--color__3, khaki);
    transition: all 1.5s ease-in-out;
    padding: 1em;
    margin: 0 10em;
    display: grid;
    align-items: center;
    justify-items: center;
    color: transparent;
    font-size: 10px;
}

.circle:nth-child(even) {
    background-color: var(--color__1);
}

.circle:hover {
    -webkit-transform: translateX(100%);
    transform: scale(2) translateX(50em);
    background-color: var(--color__5, salmon);
    color: white;
}

<div class="container">
        <header>Press any Number</header>
        <main>
            <div class="circle">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
            <div class="circle">5</div>
            <div class="circle">6</div>
            <div class="circle">7</div>
            <div class="circle">8</div>
        </main>
    </div>

注意：我只检查最新的 chrome。

标签： csscss-transitions

Answer 1

问题是圆圈在向右移动后没有悬停。一种可能的解决方案是将它放在一个容器中，该容器与圆圈一起延伸并将悬停事件绑定到该容器，见下文。

* {
    margin: 0;
    padding: 0;
}
:root {
    --bg-color: #454678;
    --color__1: salmon;
    --color__2: lightskyblue;
    --color__3: khaki;
    --color__4: thistle;
    --color__5: mediumturquoise;
}

body {
    background-color: indianred;
}

.container {
    display: -ms-grid;
    display: grid;
    grid-template-rows: 2em auto;
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "main";
    grid-gap: 2px;
    background-color: white;
    justify-content: safe left;
    align-content: center;
}

header {
    grid-area: header;
}
main {
    display: grid;
    grid-area: main;
    grid-template-columns: auto;
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 10px;
    justify-items: start;
    align-content: center;
    padding: 10px;
}

.circle {
    height: 2em;
    width: 2em;
    border-radius: 50%;
    background-color: var(--color__3, khaki);
    transition: all 1.5s ease-in-out;
    padding: 1em;
    margin: 0 10em;
    display: grid;
    align-items: center;
    justify-items: center;
    color: transparent;
    font-size: 10px;
}

.circle:nth-child(even) {
    background-color: var(--color__1);
}

.outer:hover .circle {
    -webkit-transform: translateX(100%);
    transform: scale(2) translateX(50em);
    background-color: var(--color__5, salmon);
    color: white;
}

<div class="container">
        <header>Press any Number</header>
        <main>
            <div class="outer"><div class="circle">1</div></div>
            <div class="outer"><div class="circle">2</div></div>
            <div class="outer"><div class="circle">3</div></div>
            <div class="outer"><div class="circle">4</div></div>
            <div class="outer"><div class="circle">5</div></div>
            <div class="outer"><div class="circle">6</div></div>
            <div class="outer"><div class="circle">7</div></div>
            <div class="outer"><div class="circle">8</div></div>
        </main>
    </div>