/    Sign up×
Community /Pin to ProfileBookmark

Possible Variations on input:hover?

Copy linkTweet thisAlerts:
Nov 02.2009

Hello. I have recently learned a very short and simple way to highlight the text on a button when the user hovers the mouse over it. Its input:hover in CSS. But I have two types of button on my web page, each with a different color scheme. Is there some way I can distinguish what I want in the two cases?

I have tried making one of them an <input type=’button’> and the other one a <button type=’button’> with a button:hover code on the CSS page for the latter. But that doesn’t seem to work. Would something like abc.xyz (or abc:xyz, or abc#xyz) for the CSS selectorwork? But what?

Thanks,

Peyton Todd ?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mityaNov 02.2009 — You don't say how you have your CSS set up. The easiest way to do what you want is to simply give each button its own class or ID. For example, with IDs:

[CODE]<button id="button1">this is button 1</button>
<button id="button2">this is button 2</button>[/CODE]

Then in the CSS:

[CODE]#button1 { background: #000; }
#button1:hover { background: #fff; }
#button2 { background: #fff; }
#button2:hover { background: #000; }[/CODE]

That makes button 1 black, hovering to white onmouseover, and visa-versa for button 2.

PS you should be aware that IE (at least historically, not sure about IE8) allows the :hover pseudo-class only on <a> tags. FF and Opera support it on practically everything.
Copy linkTweet thisAlerts:
@peytontoddauthorNov 02.2009 — Thanks, that works great... on Foxfire. I tested it on IE8, and just so you know, they've still not fixed it there. What I'm doing for IE8 is setting the color of the button's text in a style statement inside a function triggered by the button's onmouseover event. It turns out that, on FF, that takes precedence over the :hover instruction. Apparently, then, if you want your code to work on both IE8 and FF, you may as well ignore the :hover instruction?
Copy linkTweet thisAlerts:
@rnd_meNov 03.2009 — hover works fine on IE8, you just can't style form elements completely!

try changing something else on the the control, like border-color, text-decoration, etc...
Copy linkTweet thisAlerts:
@peytontoddauthorNov 03.2009 — I tested only background and text-decoration. Both of them worked fine with :hover in FF (i.e, to be precise, with #Close:hover {background: red}, for example, where the button's id is "Close"), but neither of them worked in IE8...
Copy linkTweet thisAlerts:
@rnd_meNov 03.2009 — the following tests fine in firefox3.5 and ie8:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
#button1 { background: #000; }
#button1:hover { background: #fff; }
#button2 { background: #fff; }
#button2:hover { background: #000; }
</style>
</head>
<body>
<button id="button1">this is button 1</button>
<button id="button2">this is button 2</button>
</body>
</html>[/CODE]
×

Success!

Help @peytontodd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...