悬停的文本字段在 IE 中无法正常工作答案

【问题标题】：Textfield in hover is not working properly in IE悬停的文本字段在 IE 中无法正常工作
【发布时间】：2018-03-06 20:32:47
【问题描述】：

我在 IE 中开发时遇到了问题，我制作了一个很棒的标题，但现在我在 Internet Explorer 中检查了所有内容，发现了一些错误，

以下是一个，我从来没有遇到过这样的事情，这就是为什么我对这个问题非常着迷。我什至不确定是否有人知道如何解决这个问题，接受挑战！

我知道占位符在 IE 中不起作用，但这显然不是问题。如果您处于悬停状态，并且您要越过文本字段，则该框会消失，您需要再次越过它。

这里有一些代码：

<ul>
    <div class="transparant">
        <div class="dropbox">
            <div class="login">
                <div class="textfield">
                     <form method="post">
                       <input id="textfield_post" type="text" name="username" placeholder="Gebruikersnaam" class="matrix"/>    
                </div>
            </div>

            <div class="pass">
                <div class="textfield">
                    <input id="textfield_post" type="password" name="password" placeholder="Wachtwoord" class="matrix"/>   
                </div>
            </div>

            <div class="loginbutton">   
                <input type="submit" class="btn" value= "Login" type="button" id="login_button"></form>
            </div>

            <div class="forgotpass">
                <a href="#" onclick="NewPassword()">Forgot password?</A>
            </div>
        </div>
    </div>
    </div>
</ul>

我认为这是因为 z-index。另外，我不想使用 jquery 或任何东西，我只想使用正确的 HTML 和 CSS 来解决问题。

我问你是否有人熟悉这个问题，

网站：（仅在 IE 7&8）

感谢阅读；）

【问题讨论】：

同时提供 css 文件。这样检查问题会更容易。
不确定它是否会有所帮助，但您的 FORM 标记只围绕第一个输入，而它应该围绕包括按钮在内的所有表单字段。
//误读了你。我知道，但这不是问题所在。比利，我确实注意到，如果我摆脱了价值，它就可以工作，但是 IE 没有“占位符”。
嗨 Bobby，css 在演示中
仅供参考：您有一个额外的关闭 DIV 标记，而不是此代码中所需的，并且您还没有关闭您的表单元素。

标签： html css internet-explorer

【解决方案1】：

当您清空文本框时，问题就解决了。我不知道你是否接受这种解决方法，但是嘿，它有效:)

【讨论】：

【解决方案2】：

我猜你是用:hover CSS 或mouseover() JQuery 来使这个框出现的。我建议使用mouseentered()查看以下链接：

http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

并确保使用 ul overflow:hidden

【讨论】：

说实话，我觉得这是个好主意，我试试用它！|也不确定这是否可行，但谁不尝试，谁没有达到

【解决方案3】：

IE 目前不支持Placeholder。我建议您使用JQuery 移动。这是示例代码

<p><script type="text/javascript">
    $(function () {
        if (!$.support.placeholder) {
            var active = document.activeElement;
            $(':text').focus(function () {
                if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).blur(function () {
                if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                }
            });
            $(':text').blur();
            $(active).focus();
        }
    });
</script>
</p>

希望对你有帮助

【讨论】：