Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

class + onclick

Status
Not open for further replies.
vlitim

vlitim

Programmer
Sep 2, 2000
393
GB
is it possible to apply a class that has both the onclick and onmouseover to it?

I am using the below in an href which works fine but I need to but it in a large number of places and might need to change the cursor at a later stage

<a href=# onclick=&quot;style.cursor='wait'&quot; onmouseover=&quot;style.cursor='hand'&quot;>Hello</a>

ideally if I could

<a href=# class=changeCursor>Hello</a>

Is this possible??

Cheers
Tim
 
Sort by date Sort by votes
Tim,

Try this:

Code: 
<HTML>
<HEAD>
<STYLE TYPE=&quot;text/css&quot;>
A.changeCursor:hover   { cursor: hand; }
A.changeCursor:active  { cursor: wait; }
</STYLE>
</HEAD>
<BODY>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot;>link 1</A><BR>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot;>link 2</A><BR>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot;>link 3</A><BR>
</BODY>
</HTML>

Hope this helps!

Dan
 
Upvote 0 Downvote
that very nearly works perfectly. The only problem is that once it is clicked it it stays as the 'wait' cursor. I have tried to add the 'visited' part to the style sheet but it seems to make no difference what so ever!

A.changeCursor:hover { cursor: hand; }
A.changeCursor:visited { cursor: hand; }
A.changeCursor:active { cursor: wait; }
 
Upvote 0 Downvote
That's because the link is still active until it loses focus. You can force a link to lose focus as soon as it is clicked... Try this:

Code: 
<HTML>
<HEAD>
<STYLE TYPE=&quot;text/css&quot;>
A.changeCursor:hover   { cursor: hand; }
A.changeCursor:active  { cursor: wait; }
</STYLE>
</HEAD>
<BODY>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot; onFocus=&quot;this.blur();&quot;>link 1</A><BR>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot; onFocus=&quot;this.blur();&quot;>link 2</A><BR>
<A HREF=&quot;#&quot; CLASS=&quot;changeCursor&quot; onFocus=&quot;this.blur();&quot;>link 3</A><BR>
</BODY>
</HTML>

Dan
 
Upvote 0 Downvote
Note that :visited has to be declared before :hover. When applying pseudo classes they need to follow a strict order to work:

:link
:visited
:hover
:active

Luther Vandross Hates Alcohol or something.
 
Upvote 0 Downvote
the focus doesn't do what I need it to do as it changes it instantly back to the hand.

I have tried

A.changeCursor:link { cursor: hand; }
A.changeCursor:visited { cursor: hand; }
A.changeCursor:hover { cursor: hand; }
A.changeCursor:active { cursor: wait; }

but after you click the link when you hover over you still get the hand!
 
Upvote 0 Downvote
I don't think CSS can be used much more in the direction you want to go... Possibly changing the style on-the-fly using an onClick event might help, but if you're going to have an onClick, you may as well stick with your original code ;o)

Sorry I couldn't be more help!

Dan
 
Upvote 0 Downvote
With everyhting you have, including the onfocus suggestion above, chagne this:

A.changeCursor:link { cursor: hand; }
A.changeCursor:visited { cursor: hand; }
A.changeCursor:hover { cursor: hand; }
A.changeCursor:active { cursor: wait; }

to this:

A.changeCursor:link { cursor: hand; }
A.changeCursor:hover { cursor: hand; }
A.changeCursor:active { cursor: wait; }

What was happening was that as soon as you click on the link, it was considered visited, so that it changed back to the hand, as you specified in CSS. Remove that and it should work.

Take Care,
Mike
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ChrisRChamberlain
  • Locked
  • Question
Call an object with onclick
Replies
6
Views
477
ChrisRChamberlain
ChrisRChamberlain
southbeach
  • Locked
  • Question
set css for last div layer based on its class
Replies
3
Views
310
southbeach
southbeach
waydown
  • Locked
  • Question
class selectors css 1
Replies
2
Views
291
1DMF
1DMF
1DMF
  • Locked
  • Question
Can't select element following a parent of a child having a psuedo class
Replies
3
Views
280
1DMF
1DMF
1DMF
  • Locked
  • Question
ie not applying invalid psuedo class on checkValidity or exiting form field
Replies
1
Views
207
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top