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 Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

:hover and IE 2

Status
Not open for further replies.
iisman

iisman

Technical User
Mar 6, 2005
85
CA
I am trying to use :hover with an element other than "a", which IE does not seem to like. I am trying to use it with submit buttons. It works well in firefox, but goes unrecognized in IE.

Is there a workaround for this other than using mouseover, and different images?

This is the code for the initial way the buttons should appear. When hovered, they simply need a different text color.

If I add another line something like:
.submitbutton:hover {style definitions}
the hover will work in firefox just fine, but not IE.


Code: 
.submitbutton {border-style: solid; border-width: 0px; border-color: #ffff99; color: #ffff99; font-size: 16px; font-family: Verdana; font-weight: bold; background-color: #282484; }


 
Sort by date Sort by votes
One way would be to use behaviors (apologies for the American spelling). Dean Edwards has done this with his IE7 project here (freely downnloadable), I believe:


Hope this helps,
Dan



The answers you get are only as good as the information you give!
 
Upvote 0 Downvote

Or you could wrap your button in an A tag. This works for me in both IE and FF:

Code: 
<html>
<head>
	<style type="text/css">
		a input {
			background-color: red;
			text-decoration: none;
		}
		a:hover input {
			background-color: green;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<a href=""><input type="button" value="Hover over me!" /></a>
</body>
</html>

Unfortuntely, you appear to get an underline in FF for some reason.

Hope this helps,
Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Dan - That was actually the first help that I found from google searching, but I was hoping there would be an easier way!

I am going to go with wraping it all in <a> tags, and work to figure out how to get rid of the darn underline.

thank for the help.
 
Upvote 0 Downvote
Use a style to get rid of the underline (text-decoration:none).

Instead of using anchor tags around everything you can get the same "hover" effect using onMouseOver and onMouseOut to change the class of the object.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote

Tracy,

The "text-decoration: none" included with my answer didn't seem to work in FF, for some reason. Any idea why?

Thanks,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
I'm not certain why it didn't work. It's part of the spec, so FF should support it. It may have something to do with the "hover" pseudoclass. I'm not sure FF supports that.

I'd really look into using the onMouseOver and onMouseOut events to get the effect you want on non-anchor elements. Using an element for an unintended purpose usually results in problems down the road.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Here, the underline comes from default underline for <a> element:
Code: 
<html>
<head>
    <style type="text/css">
	a {
	    text-decoration: none;
	}
        a input {
            background-color: red;
            text-decoration: none;
        }
        a:hover input {
            background-color: green;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href=""><input type="button" value="Hover over me!" /></a>
</body>
</html>
 
Upvote 0 Downvote

Aah of course! Thanks for that. It was bugging me somewhat ;o)

Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
So I have got a form set up with the submit button wrapped in the <a> tags. The hovers work perfectly, BUT, the form does not submit properly in FF (just refreshes the page...basically submits as if it is clicking the <a href=""> link)

yes, yes...I know, tsdragon, you said that problems may occur down the road and you were right!

Any suggestion on how to fix?
 
Upvote 0 Downvote
Sorry folks, figured it out.

for those interested, i simply removed the href="" so that the submit button is wrapped in <a class="submit> instead of <a class="submit" href="">
 
Upvote 0 Downvote
again, spoke too soon. removing DOES cause the submission functionality to work if FF, but causes the hover NOT to work in IE
 
Upvote 0 Downvote

Are you using type="button" or type="submit"?

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
265
waubain
waubain
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
258
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top