javascript - HTML/CSS/JavaScript/jQuery - 在点击时保持悬停效果

Question

为了简化我的代码，我有一个容器 div。在容器 div 内是一个 img 和一个带有一些输入的表单。当您将鼠标悬停在容器 div 上时，img 逐渐消失(使用 css 修改可见性)，显示表单。

我的本​​质是这样的:

HTML

<div class="container">
    <div class="img"><img src="/img/example.jpg"></div>
    <div class="form"><form>...</form></div>
</div>

CSS

.img {
       opacity: 1;
       transition: ease 0.3s;
}
.container:hover .img {
       opacity: 0;  
    }

应用.container:hover后，如果点击div.form form的任何部分，.container:hover样式为丢失，即 img 淡入并覆盖表格。我可以点击表单输入框，但 img 仍然会再次淡入。如果我移动鼠标，.container:hover 会再次应用，我可以将我的文本输入到框中。

我注意到，只有当我使用笔记本电脑上的内置鼠标按钮单击时才会发生这种情况。如果我使用外接鼠标或触摸屏设备，则不会发生这种情况。我不确定如何解决这个问题。我只是希望能够在不丢失悬停样式的情况下单击表单。

Answer 1

试试这个:

#No2 {
visibility: hidden;

#No1:hover {
background: red;

#No1:hover + #No2 {
visibility: visible;