转换和变换行为第一次只工作一次

Question

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

转换只适用于第一个圆圈的悬停，并且只适用于一次(即使在代码笔和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>