469,290 Members | 1,872 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,290 developers. It's quick & easy.

Would like CSS rollover like this

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.
Jul 20 '05 #1
12 2039
"Mr. Clean" <mrclean@p&g.com> wrote:
http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.


Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Tweak and add other styles as needed.

If there's a chance that your link text may wrap then things become
slightly more complicated.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2
Mr. Clean wrote:
http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.


a:hover {
/* styles when a pointer is hovered over a link */
}

You should be nice and add focus to that as well. Example:

a:link {
color: blue;
background-color: white;
}

a:hover, a:focus {
color: #999;
background-color: blue;
border-top: 1px solid #999;
}

See url in sig for more examples.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #3
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Tweak and add other styles as needed.

If there's a chance that your link text may wrap then things become
slightly more complicated.


Works fine except that the graphic doesn't show at all no matter what I try.
Jul 20 '05 #4
"Mr. Clean" <mrclean@p&g.com> wrote:
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:
http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.


Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}


Works fine except that the graphic doesn't show at all no matter what I try.


URL of your page so we try to debug it?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:
http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}


Works fine except that the graphic doesn't show at all no matter what I try.

URL of your page so we try to debug it?


Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html
Jul 20 '05 #6
Mr. Clean wrote:
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:
Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:
> http://www.masterstouchremodeling.com/
>
> Would like the same effect but in cross-browser CSS Only.
>
> Anyone know how to do it? I don't really want to use images, either.
Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}
Works fine except that the graphic doesn't show at all no matter what
I try.


URL of your page so we try to debug it?

Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html


Anyway to make the space between the text and the overline and underline
more pronounced?
Jul 20 '05 #7

"Mr. Clean" <mrclean@p&g.com> wrote in message
news:85******************************@news.teranew s.com...
Mr. Clean wrote:
Steve Pugh wrote:
"Mr. Clean" <mrclean@p&g.com> wrote:

Steve Pugh wrote:

> "Mr. Clean" <mrclean@p&g.com> wrote:
>
>
>> http://www.masterstouchremodeling.com/
>>
>> Would like the same effect but in cross-browser CSS Only.
>>
>> Anyone know how to do it? I don't really want to use images, either.
>
>
> Roughly as follows:
>
> a {padding-right: 20px;}
> a:link {text-decoration: none}
> a:hover {text-decoration: underline overline; background-image:
> url(arrow.gif); background-repeat: no-repeat; background-location:
> right center;}
>

Works fine except that the graphic doesn't show at all no matter what
I try.

URL of your page so we try to debug it?

Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html


Anyway to make the space between the text and the overline and underline
more pronounced?


In terms of feasibility, I'm afraid that falls into the same category as
wanting to specify the angularity of your italics. :-)

Jul 20 '05 #8
On Tue, 06 Jul 2004 21:12:40 GMT, Mr. Clean <mrclean@p&g.com> wrote:
http://www.austinmetrobaseball.com/rollovertest.html


Anyway to make the space between the text and the overline and underline
more pronounced?

You could replace it with top and bottom borders. 1px solid.

To do this right, you need to set the same border on the a:link too - but
use the background color.
Jul 20 '05 #9
in post: <news:85******************************@news.terane ws.com>
"Mr. Clean" <mrclean@p&g.com> said:
http://www.austinmetrobaseball.com/rollovertest.html
Anyway to make the space between the text and the overline and underline
more pronounced?


a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px dotted green;}

not supported by IE

--
b r u c i e
Jul 20 '05 #10
> a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px
dotted green;}

not supported by IE


What makes you say that?
I've implemented that before and it works fine in IE...

www.webmarkdesigns.com.au

Except I think the code was more like:

a{text-decoration:none}

a:hover{border:solid #fff;border-width:1px 0}

But there's only really two differences between my code and yours: The
dotted/solid line specified and the colours.
Jul 20 '05 #11
in post: <news:eV*******************@news-server.bigpond.net.au>
e n | c k m a <bo*@marley.com> said:
a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px
dotted green;}

not supported by IE
What makes you say that?


its unreliable. sometimes the top border doesn't appear and sometimes
the bottom doesn't appear. its depends where/how its used.
--
b r u c i e
Jul 20 '05 #12
> its unreliable. sometimes the top border doesn't appear and sometimes
the bottom doesn't appear. its depends where/how its used.


Fair enough - I haven't come across any situation yet where it hasn't
worked... but I've only used it on that one site, so I guess I wouldn't
know. Interesting to hear, though.
Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by nick | last post: by
47 posts views Thread by Lauren Quantrell | last post: by
1 post views Thread by Mike P | last post: by
3 posts views Thread by Rob R. Ainscough | last post: by
2 posts views Thread by Casimir | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.