OnMouseout Events 

<!DOCTYPE html>
<html>
<head>
        <script>
            function hoverRow1()
            {
                document.getElementById("row1").style="background-color:#c8daf7;";
            }
            function removeHover1()
            {
                document.getElementById("row1").style="background-color:#ffffff;";
            }
        function hoverRow2()
            {
                document.getElementById("row2").style="background-color:#9df9ec;";
            }
            function removeHover2()
            {
                document.getElementById("row2").style="background-color:#ffffff;";
            }
            function hoverRow3()
            {
                document.getElementById("row3").style="background-color:#b2a0e8;";
            }
            function removeHover3()
            {
                document.getElementById("row3").style="background-color:#ffffff;";
            }
            function hoverRow4()
            {
                document.getElementById("row4").style="background-color:#d8a0e8;";
            }
            function removeHover4()
            {
                document.getElementById("row4").style="background-color:#ffffff;";
            }
        </script>
    </head>
    <body>
        <center><h1>Pink Frg Event Organizer</h1></center>
            <center>
        <table  border="1" id="table">
            <tr>
                    <th>Name</th>
                    <th>Venue</th>
                    <th>Date</th>
                    <th>Cost</th>
            </tr>
            <tr id="row1" onmouseover="hoverRow1()" onmouseout="removeHover1()">
                <td>Wedding Planning</td>
                <td>Smog Shoppe</td>
                <td>4.5.2018</td>
                <td>$4000</td>
            </tr>
            <tr id="row2"  onmouseover="hoverRow2()" onmouseout="removeHover2()">
                <td >Corporate Events</td>
                <td>The Hall at Fauntleroy</td>
                <td>6.9.2018</td>
                <td>$5000</td>
            </tr>
            <tr id="row3" onmouseover="hoverRow3()" onmouseout="removeHover3()">
                <td>Award Ceremonies</td>
                <td>The Feather Ballroom</td>
                <td>6.1.2018</td>
                <td>$3000</td>
            </tr>
            <tr id="row4" onmouseover="hoverRow4()" onmouseout="removeHover4()">
                <td>Gala Dinners</td>
                <td>The Fig House</td>
                <td>11.3.2018</td>
                <td>$7500</td>
            </tr>
        </table >
        </center>
    </body>
</html><!DOCTYPE html>
<html>
<head>
        <script>
            function hoverRow1()
            {
                document.getElementById("row1").style="background-color:#c8daf7;";
            }
            function removeHover1()
            {
                document.getElementById("row1").style="background-color:#ffffff;";
            }
        function hoverRow2()
            {
                document.getElementById("row2").style="background-color:#9df9ec;";
            }
            function removeHover2()
            {
                document.getElementById("row2").style="background-color:#ffffff;";
            }
            function hoverRow3()
            {
                document.getElementById("row3").style="background-color:#b2a0e8;";
            }
            function removeHover3()
            {
                document.getElementById("row3").style="background-color:#ffffff;";
            }
            function hoverRow4()
            {
                document.getElementById("row4").style="background-color:#d8a0e8;";
            }
            function removeHover4()
            {
                document.getElementById("row4").style="background-color:#ffffff;";
            }
        </script>
    </head>
    <body>
        <center><h1>Pink Frg Event Organizer</h1></center>
            <center>
        <table  border="1" id="table">
            <tr>
                    <th>Name</th>
                    <th>Venue</th>
                    <th>Date</th>
                    <th>Cost</th>
            </tr>
            <tr id="row1" onmouseover="hoverRow1()" onmouseout="removeHover1()">
                <td>Wedding Planning</td>
                <td>Smog Shoppe</td>
                <td>4.5.2018</td>
                <td>$4000</td>
            </tr>
            <tr id="row2"  onmouseover="hoverRow2()" onmouseout="removeHover2()">
                <td >Corporate Events</td>
                <td>The Hall at Fauntleroy</td>
                <td>6.9.2018</td>
                <td>$5000</td>
            </tr>
            <tr id="row3" onmouseover="hoverRow3()" onmouseout="removeHover3()">
                <td>Award Ceremonies</td>
                <td>The Feather Ballroom</td>
                <td>6.1.2018</td>
                <td>$3000</td>
            </tr>
            <tr id="row4" onmouseover="hoverRow4()" onmouseout="removeHover4()">
                <td>Gala Dinners</td>
                <td>The Fig House</td>
                <td>11.3.2018</td>
                <td>$7500</td>
            </tr>
        </table >
        </center>
    </body>
</html>
Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.