I want to make a simple link-mouse over css alone

SolidWing68

01-05-2003, 03:58 AM

I'm looking to create my own link/text mouse over effect in a css file. I would integrade it in my scrollbar css but I don't know how. If you know how to do what I want, tell me,..thanks

zoobie

01-05-2003, 04:19 AM

Well, I guess you want to change styles of mouseovers with css.

<style type="text/css">
.style1 {font:normal 12 verdana;color:white}
.style2 {font:bold 12 verdana;color:white}
</style>
</head>
<body>
<input type="button" class="style1" onmouseover="this.className='style2';" onmouseout="this.className='style1';" value="Zoob"> :D

Evlich

01-05-2003, 10:05 PM

There is a shortcut for links that you can use. Like this:

a.ntLnk:active { font-weight: bold; background-color: black; }
a.ntLnk:hover { font-weight: bold; background-color: black; }
a.ntLnk:visited { font-weight: bold; background-color: black; }
a.ntLnk:link { font-weight: bold; background-color: black; }

:active = When it is clicked
:hover = When the mouse is over it (what you want to do)
:visited = When the target page of the link has been visited already
:link = When it is a link (when the href attribute is present)
Zoobie's method is more flexible because you can use it even with text fields and stuff, but this is a quick way that doesn't use javascript and can save you a lot of typing. Hope that this helps.
~evlich

ronaldb66

01-06-2003, 01:07 PM

The :hover pseudoclass isn't supported by all browsers; the javascript solution has much wider support. Using pure CSS has its merits, however... ;)
If you want to use speudoclasses, take great care with the order in which the styles are declared:

First, optionally declare a style for the a element itself,
second, declare the :link pseudoclass style,
third, declare the :visited pseudoclass style,
fourth, declare the :hover pseudoclass style,
fifth and last, declare the :active pseudoclass style.

Any other order may cause certain style declarations to not work!

ronaldb66

01-07-2003, 08:46 AM

Come to think of it, the javascript properties used in Zoobies example are supported by about the same browsers that support the :hover pseudoclass, so it really doesn't make that much difference. In that case i'd go for :hover.