Question

我在页面上有一个水平输入框的表单。我尝试使用内嵌范围＆＃34; position：absolute＆＃34;以便验证错误浮动在其他表单元素之上。对于下面的演示，我反转了可见性，以便验证消息隐藏在悬停状态并显示在非悬停状态。

在初始页面加载时，验证错误正确显示在其他表单元素之上，一切都很好。一旦你悬停，导致jquery切换，文本隐藏，它应该，仍然一切都很好。但是，当您将鼠标移开，导致另一个jquery切换时，Chrome中的验证文本将换行到下一行。在Firefox中，当鼠标悬停并且鼠标关闭时，验证文本会随机出现在正确和错误的位置。真是太疯狂了！

不，我不想使用toggleClass，因为它没有动画效果。不，我不想使用工具提示，我需要使用自定义范围。我只想通过toggle（）将元素放回到它开始的位置。

<html>
<head>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $( 'span.validationicon' ).hover(function(){ $(this).next().toggle('fast').css("display", "inline");});
        });
    </script>
</head>
<body>

<form>
    <span>
        <label>Contact Number</label>
        <input type="tel"/>
        <span class="validationicon">!!!</span>
        <span style="position: absolute; display: inline;">Validation error goes in here</span>
    </span>
    <span>
        <label>Contact Name</label>
        <input type="text"/>
        <span class="validationicon">!!!</span>
        <span style="position: absolute; display: inline;">Other validation error goes in here</span>
    </span>
</form> 

</body>
</html>

（jquery）在<span>上使用＆＃34;位置切换（）绝对; display：inline;＆＃34; </span>

0 个答案: