noobGuy noobGuy - 4 months ago 15
CSS Question

overflow: hidden did not hide

<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>





I trying to create a menu with mouseover and mouseleave using jQuery. When user mouseover the menu image, it will slide out horizontal toward left and display the menu text. When the mouseleave, the menu text will slide back and hidden.

I have used overflow: hidden. However, my menu does not completely hid the text and resulting the initial menu width expand. can anyone explain to me how can i hide the menu text?

Thank you,

RMo RMo
Answer

You are overriding display: none with your opacity settings. So while the text has opacity it will display. You should change:

    .mouseleave(function () {

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

    });

to:

    .mouseleave(function () {

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

    });

Does this do what you are looking for?

Comments