hello every one,

i want to use a simple java script to make a hover effect on my containers, i wanted to use this code on my skin file but couldn't cover the whole container,

-----------    Container Codes   -------------------

<%@ Control Language="vb" Codebehind="~/admin/Containers/container.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/SolPartActions.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON" Src="~/Admin/Containers/ActionButton.ascx" %>

<div id="containerAreas" class="greytnessBoxGrey1">
<% If Not ModuleConfiguration.ModuleTitle ="" Then %>
<h2>
<dnn:TITLE runat="server" id="dnnTITLE" CssClass="h2" />
</h2>
<% else %>
<div class="no-title-padding"></div>
<% end if %>
<% If  DotNetNuke.Application.DotNetNukeContext.Current.Application.Version.Major < 6 Then %>
<dnn:ACTIONS runat="server" ID="dnnACTIONS" />
<% end if %>
<div id="ContentPane" runat="server"></div>
<% If  DotNetNuke.Application.DotNetNukeContext.Current.Application.Version.Major < 6 Then %>
<div class="action-buttons">
<dnn:ACTIONBUTTON runat="server" id="dnnACTIONBUTTON2" CommandName="SyndicateModule.Action" DisplayIcon="False" DisplayLink="False" IconFile="graphics/rss.gif" />
<dnn:ACTIONBUTTON runat="server" id="dnnACTIONBUTTON1" CommandName="AddContent.Action" DisplayIcon="True" DisplayLink="True" />
<dnn:ACTIONBUTTON runat="server" id="dnnACTIONBUTTON4" CommandName="ModuleSettings.Action" DisplayIcon="True" DisplayLink="True" />
</div>
<% end if %>
</div>
<script>
    var myTopcontent = document.getElementById("containerAreas");
    function changeStyles() {
        if (this.className == " hoverShow") {
            //myImage.className = "";
        } else {
            this.className += ' hoverShow';
        }
    };
    function backNormal() {
        this.className = "greytnessBoxGrey1";
    };
    myTopcontent. = changeStyles;
    myTopcontent.onmouseout = backNormal;
</script>

-----------    Container CSS Codes   -------------------

/*----------- Grey Style -----------*/
.greytnessBoxGrey2 {padding: 15px;background-color: #333333;margin-top:15px;}
.greytnessBoxGrey2 h1, .greytnessBoxGrey2 h2, .greytnessBoxGrey2 h3 {font-family: tahoma;font-size: 15px;font-weight: 500;text-decoration: none;padding-right: 5px;padding-left: 5px;}
.greytnessBoxGrey2 p, .greytnessBoxGrey2 .Normal {font-family: tahoma;font-size: 15px;color: #FFFFFF;text-decoration: none;line-height: 20px;}
.greytnessBoxGrey2 a, .greytnessBoxGrey2 a:visited {font-family: tahoma;font-size: 15px;color: #FFFFFF;text-decoration: none;line-height: 20px;}
.greytnessBoxGrey2 a:hover {color: #808080;}

/*----------- Java Effects Style -----------*/
.hoverShow {
    color: #FFF;
    /*-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);*/
    background-color: #77c4bc;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.hoverShow h2, .hoverShow p, .hoverShow .Normal{color: white;}
.containersText ,.containersText p,.containersText .Normal{padding:15px;}

--------------------- My Problem ---------------------

you can see that it works all right but just for 2 Containers and i have more than two just for showing i have put this on one of my websites you can see the problem here: http://www.nano-processor.com/fa-ir/w...

as you can see i have more than one container on this page but this code just runs on two of them what can i do to make it work on all of them?