Differences Between CSS3: Hover and: Focus

Differences between CSS3 :hover and :focus?

Hover is 'true' when the mouse pointer is over an element. Focus is true if the cursor is in that element. It's possible for hover to be false and focus true (e.g click in a text field then move the mouse away)

What is the difference between :focus and :active?

:focus and :active are two different states.

• :focus represents the state when the element is currently selected to receive input and
• :active represents the state when the element is currently being activated by the user.

For example let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

An example:

<style type="text/css">  button { font-weight: normal; color: black; }  button:focus { color: red; }  button:active { font-weight: bold; }</style>  <button>  When clicked, my text turns red AND bold!<br />  But not when focused only,<br /> where my text just turns red</button>

How make :focus, :active be the same as :hover

There is currently no better way to do so in CSS2/3.

However, you might want to use cssnext to use the @custom-selectors and :matches() syntax today.

With @custom-selectors:

@custom-selector: --enter :hover, :focus, :active;

a:--enter { ... }

With :is()(was :matches, now renamed to :is():

a:is(:hover, :focus, :active) { ... }

Use :hover, :focus to change another css outside the hovered class

Since you can't select parent elements inside CSS (wait for possible CSSv4 solution), use JS for that. On hover add class to parent element

$(document).ready(function () {
  $('.flex-align i').hover(
    function () {
      $(this).closest('.parent-wrapper').addClass('hover');
    },
    function () {
      $(this).closest('.parent-wrapper').removeClass('hover');
    }
  )
});

.flex-align {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-dropdown {
    display: none !important;
    width: auto !important;
}
.hover .nav-dropdown {
    display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="parent-wrapper">
  <div class="flex-align">
      <i class="fa fa-arrow-right dropdown-icon"></i>
      <p>Main test</p>
  </div>
  <ul class="nav-dropdown">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
  </ul>
</div>

combine hover and focus selectors styles but not simultaniously

Using the code you have, do this ...

li:focus{
    background-color:yellow;
    cursor:pointer;
    outline: none;
}

ul:hover > li:focus {
    background: none;
    cursor: default;
}

ul:hover > li:hover {
    background: yellow;
    cursor: pointer;
}

What's the CSS saying?

• Set any list item that has :focus to have yellow background.
• When you hover over the parent UL, set all the li's to have no background.
• When you hover over an individual LI, set the background to yellow.
• When you hover out of the UL, the styling resets.

JS Fiddle

Hover , Focus and Blur conflict

The issue is due to the logic in your if condition. el.val returns the reference of the function, which will never equate to an empty string. You need to use el.val() instead to get the actual value of the control:

var el = $('input');
el.focus(function() {  el.css('border', '1px solid green');});
el.hover(function() {  el.css('border', '1px solid green');}, function() {  el.css('border', '1px solid grey');});
el.blur(function() {  if (el.val() == '') {    el.css('border', '1px solid red');  } else {    el.css('border', '1px solid grey');  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><input type='text' />

CSS: Target an element on hover OR focus, but not both

I think this is what you need and just remove the hover css

/* .tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
} */

  $('div').on("mouseover",'.tt-suggestion',function(){

    $('.tt-selectable').removeClass('tt-cursor')
    $('.tt-selectable').css( "color", '')
    $('.tt-selectable').css( "background-color", '')
    $(this).css( "color", '#f0f0f0')
    $(this).css( "background-color", '#0097cf')
  })
  document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '40') {
      $('.tt-selectable').css( "color", '')
      $('.tt-selectable').css( "background-color", '')
    }
   if (e.keyCode == '38') {
      $('.tt-selectable').css( "color", '')
     $('.tt-selectable').css( "background-color", '')
  }
}

What is the difference between parent *:hover {} and parent:hover * {}?

• .parent *:hover {} means: target all descendants of any element with class="parent", while in a hover-state" (that is, while the descendant is hovered)

• .parent:hover * {} means target all descendants of any element with class="parent", while the element with class="parent" is in a hover-state (note that if a descendant element is hovered, so is the .parent, even if they don't form a single cohesive visual unit (e.g. position: absolute is being used).

If your <div class="parent"> has multiple children then the first rule (.parent *:hover {}) will only affect a single descendant while that specific descendant is hovered - so if the user mouse-overs another element then the style-rule would change.

The second rule is such that provided that .parent is mouse-hovered, then all descendants will have their styles changed. This is not a good style rule because the descendant selector will select everything under .parent (e.g. every single <span>, <a>, <p>, etc). You probably should use a more specific selector.

Focus type css while hovering on html button in IE

Is this what you're looking for? http://jsfiddle.net/Screetop/tpx5tyxc/
As mentioned by the others, take a look at the outline property. Also the box-shadow simulates a border around your button.

<button>Submit</button>

button {
    display: block;
    background: grey;
    padding: 5px;
    border: none;
    box-shadow: 0 0 0 3px grey;
}
button:hover {
   /*What should go here?*/
    outline: 1px dotted white;
}
button:focus {
    outline: 1px dotted white;
}

use :focus as a :hover replacement for keyboard navigation

This can be done in JavaScript with focusin/focusout events (they are just like focus and blur except they bubble). Here is a fiddle.

It boils down to this function:

var deepFocus = function(element, cls) {
    cls = cls || 'deep-focus';

    element
        .on('focusin', function() {
            element.addClass(cls);
        })
        .on('focusout', function() {
            var value = !!element.find(':focus').length;
            element.toggleClass(cls, value);
        });
};

Update: There is a draft spec that contains the :focus-within selector which would exactly do what is required here.

---

Related Topics