Home/ Questions/Q 3403464
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T05:15:51+00:00

For giggles, I’m creating an image free, but interacting website. On the menu, I

  • 0

For giggles, I’m creating an image free, but interacting website. On the menu, I want each item to fade to gray on mouseover, and then fade back to white on mouseout. Currently, all of the menu items fade in unison. For many who inspect my code, you’ll surely see why in quick time. I’m just too new to it.

Link to site: Zero Img Site

jQuery stuff:

<head>
    <title>Imageless Website in HTML5, jQuery and CSS</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <!-- <script type="text/javascript" src="js/CreateHTML5Elements.js"></script> -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js"></script>

</head>

<script>
$(document).ready(function(){
        $(".block").mouseover(function(){
        $(".block").animate( { backgroundColor: '#777777' }, 100)
    });
        $(".block").mouseout(function(){
        $(".block").animate( { backgroundColor: 'white' }, 200)
    });
});
</script>

HTML Stuff:

<a href="http://www.example.com">
    <div class="block">
        home
    </div>
</a>

<a href="http://www.example.com">
    <div class="block">
        about
    </div>

</a>

<a href="http://www.example.com">
    <div class="block">
        contact
    </div>
</a>

</nav>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to change the .block selectors in the mouseover functions so they simply act on the element you are mouseovering. You do this by using the keyword this.

    $(".block").mouseover(function(){
    $(this).animate( { backgroundColor: '#777777' }, 100)
});
$(".block").mouseout(function(){
    $(this).animate( { backgroundColor: 'white' }, 200)
});
    • 0