表单自动完成中断 CSS 悬停

Question

好的，我有一个桌面网站的下拉表单。 用户将光标悬停在链接上，表单会显示在下方，他们可以填写。

这是通过 CSS 完成的

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form {
  visibility: visible;
  opacity: .95;
}

这是（为简洁起见编辑）标记

<div class="subscribe-popup desktop-only">
    <span class="subscribe-cta">join our mailing list</span>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>

问题在于，当我单击表单中的任何文本输入时，Chrome 会生成一个带有自动完成建议的下拉菜单。只要我将鼠标悬停在任何建议上，悬停就会在表单上消失，并且表单会消失。

为什么会这样，我该如何阻止这种情况发生？

Answer 1

<form>
  <input type="text" autocomplete="off">
  <input type="submit" value="submit">
</form>

您可以通过执行以下操作来停止浏览器自动完成。

<input type="text" autocomplete="off">

将autocomplete="off" 属性放在输入字段中。希望它能解决你的问题。

Answer 2

需要有关您的标记的更多信息，但如果您想保留自动完成功能，也许您可​​以通过在表单本身添加 :hover 来解决它，自动完成建议是某种影子 DOM输入，例如它将包含在表单/输入本身中，所以这样的事情可能会有所帮助：

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.subscribe-form:hover { /* this is new */
  visibility: visible;
  opacity: .95;
}

编辑：提供标记后，我可以稍微摆弄一下，似乎防止闪烁的唯一方法是将表单上的:hover 替换为:focus-within，这似乎有效，但没有IE（两者都没有心爱的旧的也不是 Edge）确实支持它，所以如果你需要对这些的支持，你可能需要 JS，然后你可以处理与 JS 的整个交互！或者您可以尝试类似polyfill 的:focus-within （或者您不希望IE 用户成为订阅者？=D）

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.subscribe-form:focus-within {
  visibility: visible;
  opacity: .95;
}

<div class="subscribe-popup desktop-only">
    <span class="subscribe-cta">join our mailing list</span>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>

一个可能的CSS-only替代方案可能是让不支持:focus-within的浏览器用户点击订阅链接而不是仅仅悬停它（如果什么都不做，这可能是他们无论如何都会做的事情发生，当然只是一个假设）。需要支持 通用同级组合器-选择器，该选择器广泛用于 supported（IE7+，其他所有人）：

.form-toggle {
    /* just make it invisible but not inaccessible */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    outline: none;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.subscribe-popup .subscribe-form {
    opacity: 0;
    visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.form-toggle:checked ~ .subscribe-form,
.subscribe-form:focus-within {
    visibility: visible;
    opacity: .95;
}

<div class="subscribe-popup desktop-only">
    <input class="form-toggle" type="checkbox" id="form-toggle" />
    <label class="subscribe-cta" for="form-toggle">join our mailing list</label>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>