Scss Target Class Before :Hover

SCSS target class before :hover

You can keep the ampersand & via a variable.

.parent {
  $this: &;
  
  &:hover {
    
    #{$this}__variation--active {
      background: red;
    }
  }
}

Javascript - add class on hover and keep it until hover on another element

You can add a mouseenter event listener to all elements with the container class that adds the hidden class to the div in each one and adds the show class to the div in the current one.

const containers = document.querySelectorAll('.container');

containers.forEach(f => f.addEventListener('mouseenter', function() {
  containers.forEach(e => {
    var div = e.querySelector('div');
    div.classList.add('hidden');
    div.classList.remove('show');
  })
  this.querySelector('div').classList.add('show')
}))

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 9999s, opacity 0.1s linear;
}

.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p>Hover me 1</p>
  <div class="hidden">Somthing 1</div>
</div>
<div class="container">
  <p>Hover me 2</p>
  <div class="hidden">Somthing 2</div>
</div>
<div class="container">
  <p>Hover me 3</p>
  <div class="hidden">Somthing 3</div>
</div>

How can I write a ':hover' condition for 'a:before' and 'a:after'?

This depends on what you're actually trying to do.

If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.

If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.

This specific order of pseudo-classes and pseudo-elements is stated in the spec:

One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.

However, for user-action pseudo-classes such as :hover¹, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.

---

¹ _{Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.}

Hover :before Hover ? How?

At present you can't attach :hover (or any other pseudo-classes to a pseudo-element). It is implied by the below text in the W3C Spec for pseudo-elements:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

and the following one from the W3C Spec for selector syntax:

One pseudo-element may be appended to the last sequence of simple selectors in a selector.

Pseudo-classes (like :hover, :link etc) are simple selectors and a pseudo-element can only be appended after all such simple selectors. So, it rules out the possibility of a div:hover:before:hover or div:before:hover.

---

In the below snippet, a very simple one, you can see how the div:after:hover selector never gets matched while the div:hover:after does.

div:after {  display: block;  content: 'World';  background: beige;}div:after:hover {  background: green;}div:hover:after {  border: 1px solid green;}div:hover {  border: 1px solid red;}

<div>Hello!</div>

CSS3 transition, target element before hover element

The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.

However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.

Since you can’t use !, there is currently no way to select what you want with pure CSS.

See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.

What's the purpose of `:hover::before`?

It's for animation effect. The use of ::before is also cleaner.

The ::before selector inserts something before the content of each selected element(s).

So you can think of the ::before pseudo as an empty div. The following is equivalent without the ::before pseudo

.anchor-style {  font-size: 18px;  letter-spacing: 2px;  text-transform: uppercase;  display: inline-block;  text-align: center;  width: 270px;  font-weight: bold;  padding: 14px 0px;  border: 3px solid #ff0072;  border-radius: 2px;  position: relative;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);}
.before {  -webkit-transition: 0.5s all ease;  transition: 0.5s all ease;  position: absolute;  top: 0;  left: 50%;  right: 50%;  bottom: 0;  opacity: 0;  content: '';  background-color: #ff0072;  z-index: -2;}
.anchor-style:hover > .before {  -webkit-transition: 0.5s all ease;  transition: 0.5s all ease;  left: 0;  right: 0;  opacity: 1;}

<a class="anchor-style" target="_blank" href="http://www.infinity2o.com">    <div class="before"></div>    Say Hi to My New Matches</a>

:hover but :not on a specific class

The functional notation is on :not(), not :hover:

a:not(.active):hover

If you prefer to put :hover first, that's fine:

a:hover:not(.active)

It doesn't matter which pseudo-class comes first or last; either way, the selector works the same. It just happens to be my personal convention to put :hover last as I tend to place user-interaction pseudo-classes behind structural pseudo-classes.

Use :hover to modify the css of another class?

It's not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

[Edit]

With the new CSS (4) selector :has() guide from CSS4.Rocks (archived by Wayback Machine) and :has() guide from MDN Web Docs, you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

SASS :after :hover selector

Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.

&:after:hover {} would select the after pseudo-element and used on hover it.

---

Related Topics