/    Sign up×
Community /Pin to ProfileBookmark

Hover conundrum

Copy linkTweet thisAlerts:
Jul 12.2007

I don’t quite understand this..

if I had a li

<li id=”content”> etc </li>

and say Li had a background image of something.png

when hovered it would change to something2.png

does that mean I do this:

#content: hover {
etc
}

Also, in the same style sheet theres another rule

that uses hover on the same element but it doesn’t say anything about changing the background.

If this happens, how do I implement the background change?

to see an example:

[url]http://goldenworldgoods.awardspace.com/[/url]

I want the links to change their background image after I hover over them, the top side nav bar

There some other problems on the links, namely when you hover over market and contact us.

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@macthewebJul 12.2007 — Current versions of Explorer don't implement hover with anything but a link. So to work background images in a navigation list you need to attach them to the a element.

<ul id="rollover">

<li><a href="somewhere.html">Somewhere</a></li>

</ul>

The CSS would look something like

#rollover a { display block; padding: 5px 10px; color: #fff; background: #006 url(link-off.png) no-repeat;}

#rollover a:hover { color: #000; background: #ffc url(link-over.png) no-repeat:}

If you don't actually want the link to go to another page if it's clicked you can use an #. If you don't want the page reload to the top. Give the element a unique id and link it to itself

<a href="#somewhere" id="somewhere">
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 12.2007 — Is that just concerning explorer or all the browsers on the internet?
Copy linkTweet thisAlerts:
@WebJoelJul 12.2007 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}

ul {position:relative; top:50px; left: 50px;}

ul li {list-style-type:none; height:135px;padding:6px; display:inline; color:black ;background-color:#ebecf6}

ul li a {color:black;padding:6px; font-weight:bold; line-height:2.0em;}

ul li a:hover {background-color:#ef3ef3; color:white}

</style>

</head>

<body>

<ul>

<li><a href="#nogo">First Link</a></li>

<li><a href="#nogo">Second Link</a></li>

<li><a href="#nogo">Third Link</a></li>

<li><a href="#nogo">Fourth Link</a></li>

<li><a href="#nogo">Fifth Link</a>

</li></ul>


</body>

</html>[/QUOTE] Here is an example using "background-color:foo;" (so I don't have to create-attach an image).

But to do this with an image: Same HTML code but [I]this CSS[/I] instead:

<style type="text/css">

* {border:0; padding:0; margin:0;}

ul {position:relative; top:50px; left: 50px;}

ul li {list-style-type:none; height:135px;padding:6px; display:inline; color:black; [B]background:#ebecf6 url(imageName.gif)[/B]}

ul li a {color:black;padding:6px; font-weight:bold; line-height:2.0em;}

ul li a:hover {[B]background:#ef3ef3 url(imageName2.gif)[/B]; color:white}

</style>[/QUOTE] whereby "imageName.gif" is the achor at-rest, and "imageName2.gif" is the 'on-hover/mouse over' state.

Because this is 'attached' to the psuedo-class for anchor, not only will this work for all browsers but esp. it will work for IE.

To get a 'hover state' for a non-anchor, you need to install a simple *[B]hta[/B] behavior routine, which is a very small javscript code that instructs IE how to handle pseudo-class as it would a javascript "onMouseOver" (which it would do correctly even if the element was NOT a link, -handy for highlighting TRs and/or TDs in a TABLE-based layout).
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 12.2007 — What about using the suckerfish method? the sfhover would that work?
Copy linkTweet thisAlerts:
@WebJoelJul 12.2007 — dbl.post.
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 12.2007 — I think you posted on the wrong thread...?
Copy linkTweet thisAlerts:
@WebJoelJul 12.2007 — I think you posted on the wrong thread...?[/QUOTE] Yes, I did. :o I'm a newly-fledged Mod. Hit the wrong button. Being a Mod, -New Parental Controls, you know. ? -This thing has more buttons on it than Darth Vader's bathroom. :rolleyes:
Copy linkTweet thisAlerts:
@CrucialJul 13.2007 — There are some good examples you might find useful and educational at:

http://css.maxdesign.com.au/listamatic/
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 13.2007 — Thanks, but could you look at the site http://goldenworldgoods.awardspace.com/

The positioning is a bit wrong... (in the links)
Copy linkTweet thisAlerts:
@ray326Jul 13.2007 — I think I'd go with text-align:right on the #nav then right padding of 20-25pt on each of the anchors.
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 13.2007 — thanks, I got it sorted now.
×

Success!

Help @Dragonkai spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...