|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
September 10th, 2004, 12:38 PM
|
|||
|
|||
Link hover effect
Is there a way to apply the link hover effect on some texts but don't actually link to anywhere? It seems to me that the following CSS will only work if the texts actually have a hyper link to it.
A.myLink:link {color:#FFFFFF;} A.myLink:visited {color:#003399;} A.myLink:hover {color:#33FF00;} A.myLink:active {color:#003399;} I want to have the effect of the hover effect but without the link. Any help is appreciated. ljCharlie
|
|
#2
September 10th, 2004, 02:25 PM
|
||||
|
||||
|
How about this:
Code:
<style type="text/css">
<!--
.myLink:link {color:#FFFFFF;}
.myLink:hover {color:#FF0000;}
-->
</style>
<span class="myLink">Hello world!</span>
That appears to work for me.
|
|
#4
September 10th, 2004, 03:24 PM
|
||||
|
||||
|
No problem
|
|
#6
September 10th, 2004, 03:43 PM
|
||||
|
||||
|
Hmm... the code I tried follows:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.myLink:link {color:#FFFFFF;}
.myLink:hover {color:#FF0000;}
-->
</style>
</head>
<body>
<span class="myLink">Hello all!</span>
</body>
</html>
The only difference I can see is the <!-- and --> around the style section and the inclusion of a URL in the doctype.
|
|
#7
September 10th, 2004, 06:06 PM
|
|||
|
|||
|
you could always go javascript
 Code:
<span onmouseover="this.style.color='green';" onmouseout="this.style.color='black';">Hello all!</span>
__________________
Jack --------- use code tags become vegetarian python? yes, sir! unarm.org get firefox If I helped you then please click the "  " in the upper right-hand corner of my post.
|
|
#8
September 10th, 2004, 08:54 PM
|
|||
|
|||
|
With CSS you can simple apply a style to the :hover event of a tag, but don't expect this to work in IE as it only understands the :hover event on links.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
span.myLink:hover {color:#33FF00;}
</style>
</head>
<body>
<span class="myLink">Test only</span>
</body>
</html>
I just modified the above code. For some reason, I had to use span.myLink to get this to work. I don't think you can use :link for plain text. Again, this won't work in IE. For that, you will need to use javascript. Hope that helps.
|
|
#10
September 13th, 2004, 08:08 AM
|
|||
|
|||
|
Many thanks for all your help. Let's say I go with javascript, how do I simulate the under line part? The example you showed above does not have under line when mouse over.
ljCharlie
|
|
#11
September 13th, 2004, 03:58 PM
|
|||
|
|||
|
Quote:
like this: Code:
<span onmouseover="this.style.color='green';this.style.textDecoration='underline';" onmouseout="this.style.color='black';this.style.textDecoration='none';">Hey there</a>
|
|
#13
September 24th, 2004, 12:43 AM
|
||||
|
||||
|
One alternative is to link to nowhere.
<a href="#">hello</a> If you click the link ('hello') nothing happens.... Actually - that's not 100% true. You'll hear the little clicking sound you get when you press on a link (or is that just my computer...?) and then it will look like you've visited that link (the link will change colour (unless you've set visited links to have the same colour as regular links)). Well - it's one idea and it works for me (I do actually set some visited links to be the same colour as unvisited links).
|
|
| Viewing: Dev Shed Forums > Web Design > Web Design Help > Link hover effect |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
