Question

我知道这段代码已经很小了，但是我需要帮助优化它，因为我觉得我并不足以使这段代码更有效率。所以这个想法就是当你将鼠标悬停在#desno上时，会弹出#loginbox，当你将鼠标悬停在它上面时，它会继续显示。当鼠标同时离开#desno和#loginbox

时，它会被隐藏

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#desno").mouseover(function () {
                $("#loginbox").fadeIn("fast");
            });
            $("#desno").mouseout(function () {
                $("#loginbox").hide();
            });
            $("#loginbox").mouseover(function () {
                $("#loginbox").show();
            });
            $("#loginbox").mouseout(function () {
                $("#loginbox").hide();
            });
        });
</script>

是的，任何帮助都将不胜感激。如果你能解释你做了什么以及如何做到这一点以及它背后的思考过程，我也会喜欢它。

Answer 1

尝试将编辑器的字体更改为较小的尺寸。

我将假设#loginbox是#desno的孩子并给你这个：

＆＃13;

#loginbox {display:none}
#desno:hover #loginbox {display:block}

＆＃13;

<div id="desno">
  I am desno
  <div id="loginbox">I am loginbox</div>
</div>

＆＃13;

祝你好运不到。

Answer 2

$(document).ready(
    function () {
        $("#desno,#loginbox").mouseover(function () {
            $("#loginbox").show();
        });
        $("#desno,#loginbox").mouseout(function () {
            $("#loginbox").hide();
        });
    });

感谢你们，我回答了我自己的问题。

优化html元素的隐藏和显示

2 个答案: