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的整个交互！或者，您可以为:focus-within尝试使用类似polyfill的方法（或者也许您不想让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 替代方案可能是使不支持: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>

表单自动完成功能会中断CSS悬停

2 个答案: