/    Sign up×
Community /Pin to ProfileBookmark

css hovering

Copy linkTweet thisAlerts:
Mar 25.2010

Im trying to make a div box to hover offsetted from the original box, but it doesnt seem to work.

[url]http://www.xgs-gaming.com/studentbyen/hover.php[/url]

[code=html]
<html>
<head>
<style type=”text/css”>
#outerBox {
position: relative;
overflow: hidden;
width: 500px;
height: 500px;
margin: 100px auto 0px auto;
background-color: gray;
}
#innerBox {
position: absolute;
top: 100px;
left: 100px;
width: 70px;
height: 70px;
background-color: red;
}
#innerBox:hover {
display: block;
position: absolute;
top: 200px;
left: 200px;
background-color: yellow;
}
</style>
</head>
<body>

<div id=”outerBox”>
<div id=”innerBox”></div>
</div>

</body>
</html>
[/code]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 25.2010 — Logically this makes more sense[COLOR="Blue"]#outerBox:hover #innerBox [/COLOR]{
display: block;
position: absolute;
top: 200px;
left: 200px; <br/>
background-color: yellow;
}
Copy linkTweet thisAlerts:
@inseiauthorMar 25.2010 — ah, now i understand how ppl do it. thanks!
Copy linkTweet thisAlerts:
@inseiauthorMar 25.2010 — doesnt work on ie :S do i need to use whateverhover to make it work on ie?
Copy linkTweet thisAlerts:
@ExcavatorakMar 25.2010 — Hello insei,

Are you trying to do a disjointed rollover?

The span is the trick.

To get one to work in IE you would need to use an anchor since IE only hovers anchors.

Have a look at a demo here - http://nopeople.com/CSS/disjointed_rollover/index.html#preview
Copy linkTweet thisAlerts:
@inseiauthorMar 25.2010 — thanks for the tips mate! i will check it out.

i used this : http://www.xs4all.nl/~peterned/csshover.html

seemed to work ?
Copy linkTweet thisAlerts:
@FangMar 25.2010 — To get one to work in IE you would need to use an anchor since IE only hovers anchors[/QUOTE]IE7+ can hover on all elements
Copy linkTweet thisAlerts:
@tirnaMar 27.2010 — Is this what you are after?

I 've put a green 100px x 100px div on top of red 100px x 100px div on page load.

When you hover over the div the top green div moves 50px to the right and 50px down.

You can adjust the offset by playing with the css styles.

I've tested it in IE and FF

[code=html]
<!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">
<head>
<title></title>
<style type="text/css">
<!--

#div1 {
width: 100px;
height: 100px;
background-color: red;
position: relative}

#div2 {
width: 100px;
height: 100px;
background-color: green}

#div1:hover #div2 {
position: absolute;
top: 50px;
left: 50px}

-->
</style>

</head>
<body>

<div id="div1">
<div id="div2">
</div>
</div>

</body>
</html>
[/code]
×

Success!

Help @insei 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.14,
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,
)...