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?