CODEWITHSUNDEEP
htmlcsscss-selectors
guidsen
guidsen

Reputation: 2393

When input has :focus, dont trigger :hover styles

I got a input which I styled with a :focus and :hover. When the input has :focus, I don't want to have the :hover style triggered when I hover over the input.

How am I supposed to style that?

My css is as follow:

.form-control:hover {
   border-color: #a9a9a9;
}

.form-control:focus {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
}

Upvotes: 31

Views: 25421

Answers (5)

arielnmz
arielnmz

Reputation: 9145

There's an specific CSS selector for this, the :not selector. And it has good compatibility:

a:hover:not(:focus) {
  color: magenta;
}

a:focus:not(:hover) {
  color: cyan;
}
<a href="example.com">Stackoverflow</a>

I also suggest you give preference to the focus event, since it's somewhat more "static" than the hover state, with something like this:

a:hover:not(:focus) {
  color: magenta;
}

a:focus {
  color: cyan;
}
<a href="example.com">Stackoverflow</a>

And for a backwards-compatible alternative:

a:hover {
  color: magenta;
}

a:focus {
  color: cyan;
}

a:focus:hover {
  color: cyan;
}
<a href="example.com">Stackoverflow</a>

In simple words:

You have a rule for each state (magenta for hover and cyan for focus) and one for both, giving preference (visually) to the focus state: cyan.

Upvotes: 48

ml242
ml242

Reputation: 109

quick hack: add a border: solid 0px #FFFFFF to .form-control:focus

Upvotes: 0

BoltClock
BoltClock

Reputation: 723598

Simply add a :not(:focus) to your :hover rule like so:

.form-control:hover:not(:focus) {
   border-color: #a9a9a9;
}

If browser support is an issue (as :not() is not supported in IE8 and lower), you will probably just have to write a new rule combining :hover and :focus to override the :hover rule with a hard-coded color value (as the initial value of border-color, currentColor, is not supported in IE8 and lower either):

.form-control:hover {
   border-color: #a9a9a9;
}

.form-control:hover:focus {
   border-color: /* Default border color depending on your layout */;
}

Upvotes: 3

DRD
DRD

Reputation: 5813

One solution is to use pointer-events: none declaration when input has :focus: http://jsfiddle.net/kbLP9/.

.form-control:focus {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   pointer-events: none;
}

Another solution is to combine pseudo-classes :focus and :hover to achieve the desired effect: http://jsfiddle.net/7LbNV/.

.form-control:focus:hover {
    border-color: initial;
}

Upvotes: 1

NathanG
NathanG

Reputation: 1645

Removing the border on focus works:

.form-control:hover {
    border-color: #a9a9a9;
}
.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    border: none;
}

Or set the border to transparent on focus to not have the form 'jump'.

.form-control:hover {
    border-color: #a9a9a9;
}
.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    border-color: rgba(0, 0, 0, 0);
}

See here: http://codepen.io/TheNathanG/pen/eCtiu

Upvotes: 0

Related Questions