/    Sign up×
Community /Pin to ProfileBookmark

change div box styles on rollover

Copy linkTweet thisAlerts:
Mar 14.2005

i have an <a> tag around my div tag (is it ok to do that?). the link works fine but what i want is for the styles of the div to change on roll over [url]http://www.thehopeandanchor.net/nypd/tagtest.php.[/url] the one on the left is normail state and right os the rollover state.

here is my style sheet:

[CODE]
div#polarodBox {
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;

font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;
}

div#polarodBoxOver {
width:202px;
height:202px;
background-color: #EAE7DF;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;

font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #A59687;
line-height: 14px;
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
[/CODE]

and one one of my div/link tags:

[CODE]
<a href=”showplace.php”>
<div id=”polarodBox” style=”position:absolute; left:10px; top:10px;”>
<img src=”site_images/asketest.jpg” width=”198″ height=”164″ border=”0″ >
<br >BROUGH PARK
</div>
</a>
[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@the_treeMar 14.2005 — [i]Originally posted by lomokev [/i]

[B]i have an <a> tag around my div tag (is it ok to do that?). [/B][/QUOTE] No, you cannot have block level elements inside inline elements, try span instead. [i]Originally posted by lomokev [/i]

for the styles of the div to change on roll over [/B][/QUOTE]Give this a shot[CODE] a span{
display: block // makes it act like a block level element
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;

font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;

}
a:hover span{
background-color: #EAE7DF;
color: #A59687;
// you don't need to repeat yourself with pseudo classes
}[/CODE]
Copy linkTweet thisAlerts:
@lomokevauthorMar 14.2005 — thanks thats works really well, only tested in on safari and firefox on the MAC PC still in box cos i just moved also have to deal with being on dial up until ASDL is online! + no cable TV yet, but on the other hand it dose mean i have less distractions and can easily get on with work
Copy linkTweet thisAlerts:
@davidbrentMar 14.2005 — [i]Originally posted by the tree [/i]

[B][CODE]display: block // makes it act like a block level element
[/CODE][/B][/QUOTE]

CSS error.
Copy linkTweet thisAlerts:
@lomokevauthorMar 14.2005 — can you suggest any thing to fix this css error?
Copy linkTweet thisAlerts:
@TriumphMar 14.2005 — [i]Originally posted by lomokev [/i]

[B]can you suggest any thing to fix this css error? [/B][/QUOTE] I guess you could put a semicolon in there:display: block;
Copy linkTweet thisAlerts:
@lomokevauthorMar 14.2005 — oh i see i did that anyway just a little typo
Copy linkTweet thisAlerts:
@lomokevauthorMar 24.2005 — unfotunatly that dose not work on the IE on the PC is there any way of changeing it so it will or is there another way?

i have put a new sample page on line so that you can see that it works for pretty much every thing apart from PC ie!

http://www.thehopeandanchor.net/nypd/over_test.php
×

Success!

Help @lomokev 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...