防止伪元素触发悬停？ [英] prevent a pseudo element from triggering hover?

问题描述

如果我有标记：

 < div class =a b>< / div> 
  

其中.a类有一个与其关联的悬停类

，.b类有一个与它相关的伪元素......就像这样：

  div 
 {
 width：100px; 
 height：100px; 
} 
 .a {background：red;显示：inline-block; } 
 .a：hover {background：green; } 
 
 .b：在
之后{
 content：''; 
 display：inline-block; 
 width：100px; 
 height：100px; 
 margin-left：100px; 
背景：粉色; 
 
 
 
 $ b $ p 
 $ b 
是否可以用css来防止伪元素触发.a类hover？
 
 
 
   FIDDLE   
解决方案
以下CSS为现代浏览器提供了技巧（不是IE10-）： 
 
 
  .b：after {
指针事件：无; 
} 
  
 指针事件：无允许元素不接收悬停/点击事件。
 
 
 
请参阅小提琴。
 
 
 
 
 
 
 注意  
 
 
 指针事件对非SVG元素的支持处于相对早期状态。  developer.mozilla.org 会为您提供以下警告：  
 
 
 
 
 在非SVG元素的CSS中使用指针事件是
 experimental。功能曾经是CSS3 UI草案
规范的一部分，但由于许多未解决的问题，它已被推迟到
 CSS4。
 
 
  Chrome的盒子模型解释 display：inline-block 导致上面的小提琴。 
 
如果改用 display：block  ，您将得到对该框的正确解释。
 
 Firefox不存在此问题。
 
为确保一致的框模型解释，请使用以下内容：
  .b：after {
 pointer-events：none; 
 display：block; 
} 
  
查看此小提琴在Chrome中查看闪烁效果。  
If I have markup:
<div class="a b"></div>
where the .a class has a hover class associated with it

and the .b class has a pseudo element associated with it... like so:
div
{
    width: 100px;
    height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background: pink;
}
Is it possible with css to prevent a pseudo element from triggering the .a class hover?

FIDDLE
解决方案
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.  

                        
这篇关于防止伪元素触发悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！