Prevent a Pseudo Element from Triggering Hover

prevent a pseudo element from triggering hover?

The following css does the trick for modern browsers (not IE10-):

.b:after {
  pointer-events: none;
}

pointer-events: none allows elements to not receive hover/click events.

See this fiddle.

---

Caution

pointer-events support for non-SVG elements is in a relative early state. developer.mozilla.org gives you the following warning:

The use of pointer-events in CSS for non-SVG elements is
experimental. The feature used to be part of the CSS3 UI draft
specification but, due to many open issues, has been postponed to
CSS4.

Chrome's box model interpretation of display: inline-block causes a flicker in the above fiddle.
If you switch to display: block instead, you will get the proper interpretation of the box.

Firefox does not have this issue.

To ensure consistent box model interpretation, use the following:

.b:after {
  pointer-events: none;
  display: block;
}

View this fiddle in Chrome to see the flicker effect.

Don't apply :hover when hovering on :before element

You could set pointer-events: none on pseudo element which is also going to remove hover event from it.

.box {

  border: 1px solid black;

}

.box:before {

  border: 1px solid black;

  transform: translateY(20px);

  position: absolute;

  color: red;

  content: "Hovering this should not make it green";

}

.box:hover:before {

  color: green;

}

.box:before {

  pointer-events: none;

}

<div class="box">Hover this to get green</div>

Preventing hover on pseudo element - but pointer-events: none; doesn't do it

You need to make changes in css

.wrap a::before {
    content: '----';
    padding: 0 15px;
    position: absolute;
    left: -50px;
    pointer-events: none;
}
.wrap a {
   text-decoration: none;
   position: relative;
   margin-left: 50px;
   display: inline-block;
}

:hover doesn't work if hovered on :before pseudo generated content

You need to use pointer-events: none; so that even if you hover the :before generated pseudo content, it will simply behave as if you are hovering the normal button.

.vbt_true:hover:before, .vbt_true.act:before {
    background-position: -14px -31px;
    pointer-events: none;
}

Demo

---

From Mozilla Developer Network :

In addition to indicating that the element is not the target of mouse
events, the value none instructs the mouse event to go "through" the
element and target whatever is "underneath" that element instead.

---

You may find support not that impressive for IE (As usual)...

^{Credits: Mozilla Developer Network}

---

But we always have polyfills available

On hovering one pseudo element, make the other pseudo element appear?

It seems the because pseudo elements are not 'real' elements, it means that the (currently) cannot be used in this way. Instead, using a 'real' element would allow for this, and so I have chosen to use a span element until this feature may or may not be implemented.

The current implementation displays:

input {

  position: relative;

  display: inline-block;

  height: 30px;

  vertical-align: top;

}

span {

  position: relative;

  height: 30px;

  width: 30px;

  display: inline-block;

  text-align: center;

  border-radius: 50%;

  font-size: 25px;

  line-height: 30px;

  background: tomato;

}

span:after {

  content: "A Question Mark";

  position: relative;

  display: inline-block;

  top: 0;

  left: 0;

  height: 60px;

  width: 100px;

  background: tomato;

  opacity: 0;

  transition: all 0.8s;

  font-size: 16px;

}

span:hover:after {

  opacity: 1;

}

<input placeholder="input element" type="text" />

<span>?</span>

Override :hover on elements under pseudo element

Maybe you could try stop propagating the event on the span.expand elements:

$("span.expand").mouseover(function(e) {
    e.stopPropagation();
});

EDIT: stopPropagating didn't work. So, retaking the idea proposed by the OP, we figured out this solution:

Add two new CSS rules:

.stay-gray a.menu__link {
  border-bottom-color: #474E51 !important;
}
.stay-gray, .stay-gray a.menu__link {
  color: #474E51 !important;
}

And then add this lines at the end of the jQuery(document).ready(function(){ ...:

toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);

This way:

jQuery(document).ready(function(){
  jQuery(".not-front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand'> </span>");
  jQuery(".front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand collapse'> </span>");
  jQuery("#block-menu-block-1 ul li li").css({ display: "block" });
  jQuery(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
  jQuery('#block-menu-block-1 .menu__item.is-expanded').click(function(){
      jQuery('#block-menu-block-1 ul li li').toggle('fast');
      jQuery( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
  });
  toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
  jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);
});

This way, when you hover over the span.expand element, the stay-gray class is toggled on at its siblings, and the new styles are applied on them and its a.menu__link descendants. When the mouse is out, the stay-gray class is toggled off.

Pseudo elements and button tag: how to prevent the pseudo element from being clickable?

Take a look at the fiddle http://jsfiddle.net/joplomacedo/UPjQL/3/

.button-rendered-as-a-link {
    position: relative; <-------------
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #8A89BA;
    font-weight: bold;
    left: 2em; <-------------
}
.button-rendered-as-a-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button-rendered-as-a-link:before {
    content:" — ";
    position: absolute; <-------------
    right: 100%; <-------------
    padding: 0 5px;
    color: grey;
    cursor: default !important;
    pointer-events: none; <-------------
}

The arrows represent the stuff I've added.

I've basically removed the pseudo element from the flow by using position: absolute. That made the button's width equal to what it would be without the psuedo element, and therefore, it's underline equal to no more than that width. The left and right properties put them back in place.

Then, as to not trigger a hover on the button I set the pseudo element's pointer-events to none. You can read more about it here https://developer.mozilla.org/en/CSS/pointer-events/.

Is it possible to not trigger :hover on ::before or ::after?

After looking around the internet for a while I finally found a solution that works flawlessly. I didn't really know about this before, but apparently there's a pointer-events style that does exactly what I want. Its accepted values outside of SVG are auto and none, but luckily the latter prevents all hover-events from triggering on the ::before pseudo-element.

Here's a demo:

[data-tooltip] {

  position: relative;

  cursor: default;

}

[data-tooltip]:hover::before {

  /*** this style prevents persistence of the tooltip when hovering over it ***/

  pointer-events: none;

  /* the rest is just the styles used in the question */

  content: attr(data-tooltip);

  position: absolute;

  top: 0; /* changed from -2px to 0 so the effect is more clearly shown */

  transform: translateY(-100%);

  background: white;

  border: 1px solid black;

}

<p>Spacer text</p>

<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>

---

Related Topics