css中的悬停事件不'；在使用JavaScript完成的第二个onclick（）事件之后，将无法工作

我有一个使用CSS的悬停转换和一个使用JavaScript的

onclick（）

事件

在第一次单击之前，一切正常。当发生第二次单击时，悬停事件不起作用，并且未应用边界半径样式，但单击事件仍然起作用

即使在每一秒点击发生后，我希望悬停过渡能够正常工作，并且应该应用边界半径样式。简而言之，在第二次点击之后，我希望一切都像第一次点击之前一样。我想用JavaScript或CSS来解决这个问题

timeclicked=0；
document.getElementById（“容器”）.addEventListener（“单击”，函数）（）
{
var x=document.getElementById（'container'）；
时间+=1；
如果（单击%2！=0）
{   
//obj.style.opacity='0.5'；
x、 style.transform='rotateZ（-360度）比例（1.4）'；
x、 style.transition='所有1.5s的易入易出'；
设置超时（（）=>{
x、 innerHTML=“我的英雄学术，缩写为HeroAca，是一部由Kōhei Horikoshi撰写和插图的日本超级英雄漫画系列。自2014年7月以来，该系列已在每周的Shōnen Jump上连载，截至2019年2月，已收集了22卷tankōbon格式的漫画。”；
}
其他的
{   
x、 样式='边界半径：50px'；
x、 style.transform='rotateZ（-45度）比例（1）'；
x、 style.transition='所有1.5s的易入易出'；
设置超时（（）=>{
x、 innerHTML=''}，'500'）；
}
});
img
{
宽度：300px；
高度：300px；
}
#主图像，#悬停图像
{
左：0px；
位置：绝对位置；
顶部：0px；
边界半径：50px；
}
#悬停图像
{
背景色：rgba（255、255、255、0.6）；
不透明度：0；
过渡：不透明度0.4s 0.1s；
边界半径：50px；
}
#悬停图像：悬停
{
边界半径：50px；
不透明度：1；
}
#容器
{
背景：url（“https://picsum.photos/300");
背景尺寸：封面；
宽度：300px；
高度：300px；
位置：绝对位置；
最高：20%；
左：40%；
变换：旋转（-45度）；
边界半径：50px；
}
#集装箱：以前
{
内容：“；
显示：块；
位置：固定；
宽度：100%；
身高：100%；
左：0；
排名：0；
z指数：-1；
背景色：rgba（255、255、255、0.6）；
边界半径：50px；
}
.气垫船
{
背景颜色：灰色；
}
您正在将
边框半径：50px
应用于
#container
和
#main image
但是，当您在第二次单击时反转动画时，您会将
#container
的内容替换为一个没有ID的新图像
#main image
，因此不会有圆角。图像URL中还有一个输入错误，从picsum.photos加载新图像时会导致错误

您的固定代码应如下所示：

x.innerHTML = '<img id="mainImage" src="https://picsum.photos/300">'},'500');

x.innerHTML=''}，'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>';

x.innerHTML=''+
''+
'';
与其每次都替换innerHTML，不如试着删除并附加DOM节点？我不太明白，你能不能用一些代码更详细一点？谢谢，这解决了边界半径部分。悬停时的css转换呢。它在第二次单击后不会返回。你能帮我吗？@tejavenkat要获得相同的效果，你需要确保你将内容设置为动画之前的内容。您还可以将以前的内容保存在变量中，并将其重置为原始内容（如更新的代码笔所示）。@tejavenkat很高兴听到，欢迎您！我必须说，真的很好的动画，这让我好奇你的整个网页可能是什么样子：-）我已经完成了，如果你想看我的网页，请给我发邮件或类似的东西，这样我就可以与uhey分享，你可以检查它，我已经给你发了邮件。现在你可以删除评论了