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创建一个带鼠标悬停和鼠标离开的菜单。当用户将鼠标悬停在菜单图像上时，它将向左水平滑动并显示菜单文本。当鼠标移动时，菜单文本将向后滑动并隐藏。

我用过overflow：hidden。但是，我的菜单没有完全隐藏文本，导致初始菜单宽度扩大。任何人都可以向我解释如何隐藏菜单文本？

谢谢，

Answer 1

您使用不透明度设置覆盖display：none。因此，虽然文本具有不透明度，但它将显示。你应该改变：

    .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之前没有显示，因为该项目有display：none（与opacity相反：0）通过在动画过程中删除并添加填充，它现在看起来像预期的那样。

溢出：隐藏没隐藏

1 个答案: