时间戳

首页 > 解决方案 > 表单自动完成中断 CSS 悬停

html - 表单自动完成中断 CSS 悬停

问题描述

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

它是通过 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 会生成一个带有自动完成建议的下拉菜单。一旦我将鼠标悬停在任何建议上，悬停在表单上就会丢失，并且表单会消失。

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

标签： htmlcssformscss-selectorshover

解决方案

需要有关您的标记的更多信息，但是如果您想保留自动完成功能，也许您可​​以通过简单地向:hover表单本身添加 a 来解决它，自动完成建议是输入的某种影子 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替代方案可能是让浏览器用户不支持:focus-within点击订阅链接，而不是仅仅将其悬停（如果什么都没发生，这可能是他们无论如何都会做的事情，当然只是一个假设）。需要支持被广泛支持的通用兄弟组合器-选择器（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>

推荐阅读