CODEWITHSUNDEEP
javascripthtmlcss
denikov
denikov

Reputation: 869

Onmouseout function for table gets called between rows/cells

I have an image with a onmouseover function which brings up a table with some options over the image (image gets dimmed). The table has a onmouseout function which should hide the table and show the image again. Problem I'm having is whenever the mouse goes between rows or cells or even on the link inside a cell, the table flashes, as though the mouse went out of the table. How can I fix this?

JSFiddle

<script type="text/javascript">
        function dimImg(x) {
            x.style.opacity = "0.3";
            document.getElementById("happinessItems").style.visibility = 'visible';
        }
        function normalImg(x) {
            document.getElementById('firstImg').style.opacity = "1.0";
            x.style.visibility = 'hidden';
        }
    </script>
    <style type="text/css">
        table{
            position: absolute;
            top: 0px;
            width: 495px;
            height: 330px;
            visibility: hidden;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        table td {
            width: 247.5px;
            text-align: center;
        }
    </style>

<a href="happiness.php"><img id="firstImg" onmouseover="dimImg(this)" src="img/leftButton.jpg" style="display:inline-block; width:495px; margin-right:5px; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222)" /></a>
            <table cellspacing="0" id="happinessItems" onmouseout="normalImg(this)">
                <tr><td><a href="#">Coats/Jackets</a></td><td><a href="#">Sweaters/Hoodies</a></td></tr>
                <tr><td><a href="#">Dresses/Suits</a></td><td><a href="#">Tshirts/Tops</a></td></tr>
                <tr><td><a href="#">Shoes</a></td><td><a href="#">Bags</a></td></tr>
                <tr><td colspan="2"><a href="#">Accessories</a></td></tr>
            </table>

Upvotes: 0

Views: 643

Answers (3)

Sergio Mcfly PYK
Sergio Mcfly PYK

Reputation: 4291

Remember two important things should be present:

<!doctype html> //at the very top of the page

border="0" cellspacing="0" cellpadding="0" //inside your table tag

Upvotes: 0

Sam Underwood
Sam Underwood

Reputation: 71

In case someone needs an answer that uses JavaScript, what worked for me was using onmouseenter and onmouseleave instead of onmouseover and onmouseout.

onmouseenter and onmouseleave don't bubble so they won't give you the flashing effect when you hover over children.

Upvotes: 5

kallehj
kallehj

Reputation: 302

Is this how you would want it to work?

http://jsfiddle.net/9s89bL3u/2/

Only css and html in this.

.test2 {
    position: relative;
    width: 495;
    height: 330px;
    background-color: blue;
}
.test1:hover table{
    visibility: visible;        
}
.test1:hover .test2{
    opacity: 0.3;        
}

table {
    position: absolute;
    top: 0px;
    width: 495px;
    height: 330px;
    border-collapse: collapse;
    visibility: hidden;
    border-spacing: 0px;
}
table td {
    width: 247.5px;
    text-align: center;
}

Upvotes: 2

Related Questions