How Make: Focus,: Active Be The Same as: Hover

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) { ... }

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

How do I combine active button and hover?

You can combine a .active class with a :hover pseudo-class in your CSS code like below. The .active class will darken the element and the :hover combined to .active will darken it even more.

button.active{  background-color:#aaa;}button.active:hover{ /* combine two conditions */  background-color:#999;}

<button type="button" class="active">An active button</button><button type="button" class="">A normal button</button>

Is it correct to combine active and hover pseudo selector like a:active:hover.?

Both are fine (and identically equivalent). I've just tested in Firefox 4.0b6/Mac and it works exactly as I would expect. In the below example, the link turns red when I point at it, and then green while I hold the mouse button down.

<!DOCTYPE HTML>
<title>Test</title>
<style>
a:hover { color: red; }
a:active { color: yellow; }
a:hover:active { color: green; }
</style>
<h1><a href="test">gggg</a></h1>

It is unusual to want a link to be styled differently when activated with the mouse than with the keyboard though.

I suspect you may be making a classic mistake. :active means "While being activated (e.g. while the mouse button is depressed over it)" and not "When the href attribute's value resolves to the URI of the current page".

There is no pseudo-class that means "When the href attribute's value resolves to the URI of the current page", for that the classic pattern is to add a "current" or "selected" class to the anchor on the server before sending the HTML to the client.

Does :focus work with specificity as :hover does?

:focus applies for the input and not the parent container and so your selector group should be as follows. (Note the changed selector in the first line)

.form-control:focus + .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
  border: 2px solid rgba(248, 151, 29, 0.77) !important;
  border-left: none !important;
  transition: all 1s ease;
}

As far as I know, when you :hover the child you are also indirectly hovering on the parent and so the .controls:hover .input-group-addon.right also works when .form-control:hover is applicable. Thus both the .form-control and .input-group-addon.right get the border.

But when you focus on the .form-control, the focus selector applies only to the input and doesn't get applied to its container. Thus only the .form-control gets the border and not the .input-group-addon. So, the selector must be changed to style the .input-group-addon based on the input and not the container's focus.

CodePen Demo

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>

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