wil_49 Posted January 20, 2007 Share Posted January 20, 2007 Hey, Is it possible to change the background of a div "menu" with the hover element?Link one is the class I have defined because I need a different image for each linkThis is the CSS code:#menu{ float:left; width: 30%; height:468px; list-style-image: url(images/icon.jpg); background: white url(images/menu.JPG) no-repeat left; padding: 20% 0% 0% 8%;}a.link1:hover{background: white url(images/menu2.JPG) no-repeat left;}Using that code, it only changes the background of the link itself.Any help would be very greatly apprciated.Cheers,wil Link to comment Share on other sites More sharing options...
Anders Moen Posted January 20, 2007 Share Posted January 20, 2007 I'm not sure what you mean but if you take a <div> with no background or something, and put a link <div class="test"><a href="" class="fullsize"><!-- no writing here if you're not gonna have that --></a></div> And then you use CSS: #test {width: 500px; height: 500px;}a.fullsize {display: block; width: 100%; height: 100%; background-image: url(1.jpg); background-repeat: no-repeat;}a.fullsize:hover {display: block; width: 100%; height: 100%; background-image: url(2.jpg); background-repeat: no-repeat;} Link to comment Share on other sites More sharing options...
wil_49 Posted January 20, 2007 Author Share Posted January 20, 2007 I dont really understand that, so I will try and explain better with rest of html.<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <title>University of Chester</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="generator" content="NoteTab Light 4.95" /> <meta name="author" content="William Maginn" /> <meta name="description" content="" /> <meta name="keywords" content="" /></head><body><div id="content"> <div id="header"> <h2>United states of America</h2> <!-- <br><img src="images/ron_burg.jpg" alt="Will Maginn" width="140" height="140"/> --> </div> <div id="menu"> <div id="menuText" <ul> <li><a class="link1" href="index.html">link</a></li> <li><a class="link2" href="index.html">link</a></li> <li><a class="link3" href="index.html">link</a></li> <li><a href="index.html">Link4</a></li> <li><a href="index.html">Link5</a></li> <li><a href="index.html">Link6</a></li> <li><a href="index.html">Link7</a></li> <li><a href="index.html">Link8</a></li> <li><a href="index.html">Link9</a></li> <li><a href="index.html">Link10</a></li> </ul> </div> </div> <div id="main"> Good morning, My name is Mr Griffin. </div> <div id="footer"> MagSoft© 2007 </div></div></body></html>I want when someone hovers over one of the links (link1, link2, link3) for that to change the background of the menu div, the rest of the coding is in the CSS file shown below.body{ margin:3% 4% 1% 4%;}#menu{ float:left; width: 30%; height:468px; list-style-image: url(images/icon.jpg); background: white url(images/menu.JPG) no-repeat left; <!-- I want this background image to change when hovering over a link --> padding: 20% 0% 0% 8%;}#main{ float:right; width: 70%; height:468px; overflow:visible; background: white url(images/bb1.JPG) no-repeat fixed right; font-family: EraserDust; color: white; font-size: large; padding: 4% 0% 0% 8%;}#footer{ border: thin solid black; clear: both;}#header{ width:100%; border: thin solid black; background: white url(images/banner.JPG) no-repeat fixed 0% 0%;} Link to comment Share on other sites More sharing options...
Anders Moen Posted January 20, 2007 Share Posted January 20, 2007 Okay. Still the same answer from me.Change this one: XHTML:<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>University of Chester</title><link rel="stylesheet" type="text/css" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="generator" content="NoteTab Light 4.95" /><meta name="author" content="William Maginn" /><meta name="description" content="" /><meta name="keywords" content="" /></head><body><div id="content"><div id="header"><h2>United states of America</h2><!-- <br><img src="images/ron_burg.jpg" alt="Will Maginn" width="140" height="140"/> --></div><div id="menu"><div id="menuText"><ul><li><a class="link1" href="index.html">link</a></li><li><a class="link2" href="index.html">link</a></li><li><a class="link3" href="index.html">link</a></li><li><a href="index.html">Link4</a></li><li><a href="index.html">Link5</a></li><li><a href="index.html">Link6</a></li><li><a href="index.html">Link7</a></li><li><a href="index.html">Link8</a></li><li><a href="index.html">Link9</a></li><li><a href="index.html">Link10</a></li></ul></div></div><div id="main">Good morning,My name is Mr Griffin. </div><div id="footer">MagSoft© 2007</div></div></body></html>CSS:#menu a {float:left; width: 30%;height:468px;list-style-image: url(images/icon.jpg);background: white url(images/menu.JPG) no-repeat left;<!-- I want this background image to change when hovering over a link -->padding: 20% 0% 0% 8%;}#menu a:hover {float:left; width: 30%;height:468px;list-style-image: url(images/icon.jpg);background: white url(images/menu_new_image.JPG) no-repeat left;<!-- I've changed the above picture now;) -->padding: 20% 0% 0% 8%;} Maybe something got wrong, here though. Hope it'll work Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now