0

场景：在 ul 列表中有 2 个链接，li：我的信息和登录 当在链接上使用 HOVER 时，一个链接必须显示一个框（带有淡入动画），其中包含一个表单。当您将鼠标悬停在链接上时，其他链接会在框内显示一个按钮（带有淡入动画）。

当用户鼠标退出链接“登录”或鼠标退出表单时，表单必须淡出。带有按钮的框，当用户鼠标移出“我的信息”链接或鼠标移出框时，必须淡出。

问题（两者相同）：当 MOUSEOUT 链接我的信息时，表单消失。当 MOUSEOUT 链接 LOG IN 时，div 内的按钮消失。

注意：1/当鼠标在链接上或在表单上时，表单必须可见 2/当鼠标在链接上或在带按钮的盒子上时，带按钮的框必须可见

参考：检查屏幕最顶部的 www.conforama.fr，链接是带有图标的“Compte”，它有一个类：“with-hover-menu”。当您将鼠标悬停在它上面时，将出现该表单。当您将鼠标移出链接或表单时，表单将消失。我需要同样的，但使用淡入淡出。

现在你可以在这个 jsfiddle 中查看下面的代码：http: //jsfiddle.net/75HYL/19/但它根本不起作用。我不知道如何实现这一点。想了解和学习...！！

<ul class="links">
    <li class="classA"><a><span>My info</span></a></li>
    <li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
    <input type ="button" value="OKAY"/>
    <div id="login" >
        <div class="form">
            <form>
                <input type="textfield" value="enter your email"></input>
                <input type="checkbox"><option>remember me? </option><input>
                <input type="button" value="Click me"/>
            </form>
        </div>
    </div>
</div>
<style>
    .links li { display:inline-block;cursor:pointer; }
    .links li { padding:0 4px 0 1px; }
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classA span {}
    .links li.classB span {}
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
    $("li.classA").hover(function() {
        $("#userInfo").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#userInfo").fadeOut('fast').css('display', 'none');
    });

    $("li.classB").hover(function() {
        $("#login").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#login").fadeOut('fast').css('display', 'none');
    });
</script>
4

5 回答 5

1

有点像这样？清理了一些语法错误并稍微改变了逻辑

于 2012-06-11T11:37:33.197 回答
1

这就是你想要的？

http://jsfiddle.net/WcUFe/3/

我只更改了 js，以便更容易看到差异。为了更轻松的生活，应该更改 cssand/或 html，并且所有代码都可以放在一个单独的插件中，这将控制整个节目。

基本上我使用一个计时器来允许用户在大约 100 毫秒内将鼠标从 LI 元素移动到显示的容器....所有其余的都很难维持状态并确保我们在任何时候都不会看到 2 个容器.

于 2012-06-11T11:47:23.307 回答
0

那么你的问题是鼠标当前必须离开你的链接才能进入盒子。因此，这些框必须消失才能使功能如您上述那样工作。

想到了一些解决方案（我对 jQuery 不是很好，所以可能有更好的选择）；1 是添加一个布尔值和一些逻辑来说明盒子是否已打开，然后只监听盒子上的 mouseout 事件（而不是链接和盒子）。另一个是对事件进行去抖动，以便在您侦听链接的 mouseout 事件之前有一点时间延迟。

  • 看起来@AbstractChaos 现在已经解决了这个问题，因为我怀疑我的建议有更好的选择！

希望这可以帮助。

于 2012-06-11T11:41:09.837 回答
0

或者

$("li.classA").hover(function() {
    $("#login").css('display', 'none');
    $("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
    $("#userInfo").fadeOut('fast');
});


$("li.classB").hover(function() {
    $("#userInfo").css('display', 'none');
    $("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
    $("#login").fadeOut('fast');
});
于 2012-06-11T11:41:21.483 回答
0

试试这个：http: //jsfiddle.net/QR49h/

我将要隐藏/显示的 div 移动到<li>元素内部：

<ul class="links">
    <li class="classA"><a><span>My info</span></a>
        <div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
            <br/>
            <input type="button" value="OKAY" />
        </div>
    </li>
    <li class="classB"><a><span>Log in</span></a>
        <div id="login">
            <div class="form">
                <form>
                    <input type="textfield" value="enter your email" />
                    <input type="checkbox" />
                    <option>remember me?</option>
                        <input />
                    <input type="button" value="Click me" />
                </form>
            </div>
        </div>
    </li>
</ul>

我还修复了 js 中的一个错误（ClassA 与 ClassB）并稍微调整了 css，以便第二<li>项可以在第一项展开时保持其位置。哦，并修复了表单 div 中的一些元素关闭问题。

于 2014-02-26T16:24:11.543 回答