溢出:隐藏没有隐藏

Question

<style>

    .divTable {
        display: table;
        float: right;
        height: 180px;
        background-color: #0082CA;
    }

    .divTableBody {
        display: table-row-group;
    }

    .divTableRow {
        display: table-row;
    }

    .menuLink, .icon {
        display: table-cell;
        padding: 10px 10px;

    }

    .menuLink {
        vertical-align: middle;
        width: 40px;
        display: none;  
        overflow:hidden;                
        white-space: nowrap;
    }

    .menuLink a
    {
        font-size:large;
        text-decoration: none;
        color: white;
    }

    .divTableRow:hover
    {
        background-color: red;
    }

    .icon 
    {
        width: 30px;
    }

    .icon img 
    {
        width: 20px;
        height: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

    $(document).ready(function ()
    {

        $('.menuLink, .icon')
            .mouseover(function () {

                $(".menuLink").stop(true, false).fadeIn(280);
                $('.menuLink').stop(true, false).animate({
                    width: "300px",
                    opacity: "1"
                });
            })

            .mouseleave(function () {

                $('.menuLink').stop(true, false).animate({
                    width: "0px",
                    opacity: "1",
                });

            });
    });

</script>

<div class="divTable">

    <div class="divTableBody">

        <div class="divTableRow">
            <div class="menuLink"><a href="http://www.google.com">Link1</a></div>

            <div class="icon">
                <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
            </div>
        </div>

        <div class="divTableRow">
            <div class="menuLink"><a href="http://www.youtube.com">Link2</a></div>

            <div class="icon">
                <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
            </div>
        </div>

        <div class="divTableRow">
            <div class="menuLink"><a href="http://www.youtube.com">Link3</a></div>

            <div class="icon">
                <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
            </div>
        </div>

        <div class="divTableRow">
            <div class="menuLink"><a href="http://www.youtube.com">Link4</a></div>

            <div class="icon">
                <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
            </div>
        </div>

    </div>

</div>

我试图使用jQuery创建一个带有mouseover和mouseleave的菜单。当用户在菜单图像上按下鼠标时，它将向左水平滑出，并显示菜单文本。当鼠标保存时，菜单文本将滑回并隐藏。

我用过溢出:隐藏。但是，我的菜单并没有完全隐藏文本并导致初始菜单宽度展开。有人能向我解释一下如何隐藏菜单文本吗？

谢谢,

Answer 1

您正在覆盖显示:没有您的不透明度设置。因此，虽然文本具有不透明度，但它将显示。你应该改变：

    .mouseleave(function () {

        $('.menuLink').stop(true, false).animate({
            width: "0px",
            opacity: "1"
        });

    });

至：

    .mouseleave(function () {

        $('.menuLink').stop(true, false).animate({
            width: "0px",
            opacity: "0",
            "padding-left": "0px",
            "padding-right": "0px"
        });
    });

也改变：

        .mouseover(function () {

            $(".menuLink").stop(true, false).fadeIn(280);
            $('.menuLink').stop(true, false).animate({
                width: "300px",
                opacity: "1"
            });
        })

至：

        .mouseover(function () {

            $(".menuLink").stop(true, false).fadeIn(280);
            $('.menuLink').stop(true, false).animate({
                width: "300px",
                opacity: "1",
                "padding-left": "10px",
                "padding-right": "10px"
            });
        })

简短解释：

通过将不透明度设置为零，填充将保持显示。Paddings以前没有显示，因为该项目通过删除和添加动画过程中的填充，显示: none (相对于不透明度: 0)，它现在看起来与预期的一样。