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

Question

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

换位仅在第一个圆盘悬停时有效，并且只能运行一次（即使在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。

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>