CSS, mouseover link, change multiple classes at once.

Posted on 2007-03-20
Medium Priority
Last Modified: 2013-11-19
I have some code... (obviously)

I have menu buttons and page borders that al all CSS based.  I need borderLeft, borderBottom and borderRight to all switch to a different class (i.e. borderLeft_over{  }) when the menu button is moused-over.

JavaScript is not my strong point.

Oh...  The border classes are all used inside a table cell.  <td class="borderBottom"> and the CSS tells it to align the background (border image) to the sides.
Question by:zero118
  • 2
  • 2
LVL 11

Expert Comment

ID: 18759134
To change the class of an object in JS you use the object.className property. If you need to change the class of multiple objects then you'd need a function to handle changing them one at a time. You will also need an ID value of the object to get at it.

<td id="tdObject" class="borderBottom">

<script language="JavaScript">
var objTD = document.getElementById("tdObject");
objTD.className = "newClassName";

Author Comment

ID: 18759179
Okay, I understand that clearly.  Meaning I'd need to create the variable and new class name for all the borders in the JS, but what about actually using the mouse-over?
LVL 11

Accepted Solution

flipz earned 500 total points
ID: 18759247
If you have a function for changing the classes say:

function menuOver() {
//change all the desired classes here
return true;

...to keep it simple have another function that resets it back on a mouseout
function menuOut() {
//change all the desired classes back
return true;

then you can add the events in whichever object needs the events to fire.

<td id="tdObject" class="borderBottom" onMouseOver="return menuOver();" onMouseOut="return menuOut();">

Does that help?

Author Comment

ID: 18759391
Much Thanks.  Works perfectly.

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

587 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question