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

【问题标题】：HTML/CSS/JavaScript/jQuery - keep hover effect on clickHTML/CSS/JavaScript/jQuery - 在点击时保持悬停效果
【发布时间】：2017-06-16 18:23:06
【问题描述】：

为了简化我的代码，我有一个容器 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 会再次应用，我可以在框中输入我的文本。

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

【问题讨论】：

不知道为什么会这样，在我的桌面上工作，但你在img标签中缺少一个结束"，你应该转换opacity而不是visibility@987654321 @
你用的是什么浏览器？
有趣。查看带有完整代码的实际网页会更有帮助吗？如果是，则页面位于rofordaward.co.uk/nominate.php
我在我的电脑上使用了 Chrome，发现了这个问题。当我使用 Vivaldi 时，当我单击表单中的输入时，表单不会关闭。如果我在输入旁边单击，则会再次观察到问题。

标签： javascript html css hover click

【解决方案1】：

试试这个：

#No2 {
visibility: hidden;

}

#No1:hover {
background: red;

}

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

}

【讨论】：

【解决方案2】：

尝试从浏览器中删除缓存的数据。有时会创造奇迹！

【讨论】：