我有一个使用 CSS 的悬停过渡和一个使用 JavaScript 的onclick()事件。
一切正常，直到第一次点击发生。发生第二次单击时，悬停事件不起作用，并且不应用边框半径样式，但单击事件仍然有效。
即使在每秒单击发生之后，我也希望悬停过渡正常工作，并且还应该应用边框半径样式。简而言之，在第二次点击之后，我希望一切都像第一次点击发生之前一样。我想用JavaScript或CSS解决这个问题。
timesclicked = 0;
document.getElementById("container").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style = 'border-radius:50px';
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300g">'},'500');
}
}); img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
border-radius: 50px;
}
#hoverImage
{
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 0.4s 0.1s ;
border-radius: 50px;
}
#hoverImage:hover
{
border-radius: 50px;
opacity: 1;
}
#container
{
background: url("https://picsum.photos/300");
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
border-radius: 50px;
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50px;
}
.hoverBack
{
background-color: grey;
}<body>
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<abbr title="Boku no Hero Academia" ><img id="hoverImage" src="https://picsum.photos/300">
</abbr>
</div>
</body>您正在将border-radius: 50px应用于#container和#mainImage但是当您在第二次单击时反转动画时，您将#container的内容替换为没有 ID #mainImage的新图像，因此不会有圆角。图片URL中还有一个拼写错误，当从picsum.photos加载新图片时，会导致错误。
您的固定代码应如下所示：
x.innerHTML = '<img id="mainImage" src="https://picsum.photos/300">'},'500');
下面是包含更新代码的代码笔。
更新 1
若要在转换回原始位置后获得相同的效果，需要为容器提供与更改其内容之前相同的标记：
x.innerHTML = '<img id="mainImage" src="https://picsum.photos/300">'+
'<abbr title="Boku no Hero Academia" >'+
'<img id="hoverImage" src="https://picsum.photos/300?2"></abbr>';