/    Sign up×
Community /Pin to ProfileBookmark

hover effects

Copy linkTweet thisAlerts:
Nov 17.2007

Is there a way to do this using CSS only (using image positioning, rather than javascript, which I can already do but am trying to steer away from)?

Say you have these text links in a nav area:

Services | Portfolio | Contact

And you want an image to appear over each link when you hover. How would one go about doing that?

I know how to use CSS positioning to change the images when you have graphical navigation. I’m just getting confused trying to change the position of an image when you hover over a text link. Thank you!

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelNov 17.2007 — A single image, 'position' changes for the differing states of ":link", ":hover" and ":active".

IMG File attached.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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;}/* Set everything to "zero" */

p {font-size: 100%; line-height:1.0em; margin:8px 0 5px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */}

html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<style>

#navIMG {width:350px; margin:40px;}

#navIMG li {display:inline; width:59px; list-style-type:none; text-align:center; margin:0 5px 0 5px; background-color:#ececec; float:left; display:block;}

#navIMG li a {width:60px; height:40px; text-decoration: none; padding:21px 0 0 3px; display:inline; float:left; background: url('image.jpg');margin-right:2px;}

#navIMG li a span {background-color:white; padding:0 6px 0 6px; border:2px solid black;}

#navIMG li a:visited {background-position:0 0; color:blue; border:4px double blue}

#navIMG li a:hover {background-position:-120px 0; color:purple; border:4px double black}

#navIMG li a:active {background-position:-240px 0; color:red; border:4px double red}

</style>

<script type="text/javascript"><!--

// -->

</script>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<ul id="navIMG">

<li><a href="#"><span>Link #1</span></a></li>

<li><a href="#"><span>Link #2</span></a></li>

<li><a href="#"><span>Link #3</span></a></li>

</ul>

</body>

</html>[/QUOTE]

[upl-file uuid=f5ee22e0-e8ae-4bc9-8816-836c08d652d9 size=13kB]image.jpg[/upl-file]
×

Success!

Help @swofford 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.13,
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,
)...