homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Add Current Element's Class To Another Element

Msg#: 4363767 posted 3:04 pm on Sep 17, 2011 (gmt 0)

I'm trying to get my navigation links to change the css background of another element with jquery.
html code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Faith Life Church - Branson, MO</title>
<script src="include/jquery-1.6.4.min.js"></script>
// changes <header> background when mouseover <ul class="inheader"><li>
$('.inheader li').hover(
<style type="text/css" media="screen">
header {background-image:url(images/backgrounds/header-flcbranson.jpg)}
<body role="document">
<header role="banner">
<h1><a href="http://www.flcbranson.org">Faith Life Church</a></h1>
<nav role="navigation">
<h2>Main site navigation</h2>
<ul class="inheader">
<li class="joinusonline"><a href="flconlineservices.php">Join Us On-Line</a></li>
<li class="areainformation"><a href="flcareainfo.php">Area Information</a></li>
<li class="flcevents"><a href="flcevents.php"><abbr title="Faith Life Church">FLC</abbr> Events</a></li>
<li class="freedownloads"><a href="freedownloads.php">Free Downloads</a></li>
<section id="content" role="main">
<h1 id="title">Welcome</h1>

css code:

header {background:#003366 url() no-repeat center top;}
header.joinusonline {background-image:url(../images/backgrounds/header-joinusonline.jpg)}
header.areainformation {background-image:url(../images/backgrounds/header-areainformation.jpg)}
header.flcevents {background-image:url(../images/backgrounds/header-flcevents.jpg)}

Quite simply, mouseover <li class="joinusonline"> and <header> should become <header class="joinusonline">. Mouseout and it goes back to <header>.


JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4363767 posted 4:52 pm on Sep 18, 2011 (gmt 0)

You'll want to look in to classList which is intended for working with multiple classNames on the same element like items in a JavaScript array. It's support is moderately decent though of course it's not even been added to Internet Explorer 10 (yet at least). If you want really good cross-browser compatibility you'll need to reference the className property (e.g. alert(document.getElementById('my_id').className);) and use the split method on space characters to create an array of the classNames.

Also ditch jQuery (and stay away from frameworks altogether) if you want to code real JavaScript, it uses unreliable proprietary methods such as innerHTML, it adds horrible amounts of overhead, everything you code is dependent on it not being poorly written, it's not cross-browser compatible, etc.

- John


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4363767 posted 6:20 am on Sep 19, 2011 (gmt 0)

<header role="banner">

Is header is a valid HTML tag ? The browser may well just dump it. Try using div instead say.

<div id="myHeader" >


Msg#: 4363767 posted 2:50 pm on Sep 19, 2011 (gmt 0)

It's valid html5.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4363767 posted 6:25 am on Sep 20, 2011 (gmt 0)

Ok if all your users are using IE 9 or similar. Otherwise stick to html4.


Msg#: 4363767 posted 1:57 pm on Sep 20, 2011 (gmt 0)

Some guys at stackoverflow helped me to realize that the only thing I was missing was...

$(document).ready(function() {

So, the complete, working, code is...

// changes <header> background when mouseover <ul class="primarynavigation"><li>
$(document).ready(function() {
$('.primarynavigation li').hover(

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved