Html 如何翻转图像并保持翻转的一面处于打开状态_Html_Jquery_Css

Html 如何翻转图像并保持翻转的一面处于打开状态

html jquery css

Html 如何翻转图像并保持翻转的一面处于打开状态,html,jquery,css,Html,Jquery,Css,我想将图像旋转180度，并保持另一面打开。我尝试过各种css，但当我在其他地方停留时，图像会回到原来的一面我在这里发布一个试用代码 CSS: HTML: <body> <div class="card"></div> </body> 想要这个结果吗 $（“.card”）.mouseover（函数（）{ $（this.css（'transform'，'rotate（180度））； }) .card{ 宽度：130

我想将图像旋转180度，并保持另一面打开。我尝试过各种css，但当我在其他地方停留时，图像会回到原来的一面

我在这里发布一个试用代码

CSS:

HTML:

<body>
    <div class="card"></div>
</body>

想要这个结果吗

$（“.card”）.mouseover（函数（）{
$（this.css（'transform'，'rotate（180度））；
})

.card{
宽度：130px；
高度：195px；
背景：url（“https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1）无重复；
利润率：50像素；
过渡：1s；
}

想要这个结果吗

$（“.card”）.mouseover（函数（）{
$（this.css（'transform'，'rotate（180度））；
})

.card{
宽度：130px；
高度：195px；
背景：url（“https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1）无重复；
利润率：50像素；
过渡：1s；
}

这是悬停的预期行为。请尝试在JS中使用事件，并在事件处理程序运行一次后删除它。这将使图像保持旋转，在不重新加载页面的情况下，任何数量的悬停都不会使图像恢复正常。这是悬停的预期行为。请尝试在JS中使用事件，并在事件处理程序运行一次后删除它。这将使图像保持旋转，在不重新加载页面的情况下，任何数量的悬停都不会使图像恢复正常。

<body>
    <div class="card"></div>
</body>