Hover on element where attribute is set - 【StackMirror】|css|css-selectors

How can I put a hover style on an element which is not disabled? I tried the following, but there was no hover effect.

input.btn[disabled='false']:hover

2012-04-05 15:21
by clarkk

Is that sample something you tried? What happened - yoozer8 2012-04-05 15:23

Yes, have tried it.. No hover effect at all on any input.btn elm - clarkk 2012-04-05 15:25

I tested it in Chrome and it worked ok. It is important to note that IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified and attribute selection isn't supported in IE6 and lower - Adam Stacey 2012-04-05 15:27

How about using the enabled selector?

<script>$("input:enabled").val("this is it");</script>

Here is a link to the docs http://api.jquery.com/enabled-selector/

2012-04-05 15:33
by Jrod

btw. It was not a jquery question : - clarkk 2012-04-05 15:37

For a css only solution I would add a class to inputs that are enabled and then target them with the css that way - Jrod 2012-04-05 15:45

I think you should rather use

input:not([disabled="disabled"]):hover {
    border: 1px solid red;
}

But this pseudo-selector won't work in most of the browsers, I think.

See http://jsfiddle.net/xmKbt/5/.

2012-04-05 15:28
by Remo

I need it to be opposite.. have tried to remove the ~ but its the sam - clarkk 2012-04-05 15:33

Sorry, just figured out that I got it completely wrong. Just updated it with a solution that should work. However, the browser compatibility is not the best - Remo 2012-04-05 15:38

Another option would be to do the 'positive' thing and just manually add a class 'not_disabled' to the button which will make the selector a lot simpler - Remo 2012-04-05 15:39

Use :not([disabled]) instead, and don't forget the .btn class - BoltClock 2012-04-05 17:12

You cannot set a pseudo class according to Mozilla and MSDN.

2012-04-05 15:27
by Frank van Wijk