CSS - Hover Passes Through Elements to Activate Hover on Covered Element

CSS - Hover passes through elements to activate hover on covered element

you can use pointer-events: none; to the element on top:

div {   width   : 200px;   height  : 200px;   float   : left;   cursor  : pointer;   border  : 1px green solid;}
div + div:hover { background: #a1a6c8; }
div:first-child {   pointer-events : none;   position       : absolute;   top            : 100px;   left           : 100px;   border         : 1px green solid;   background     : #c1c6c8;}

  <div> on top of all: hover me </div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div>

Respond to CSS hover selector if covered by another element

You can define a parent container around the DOM elements that you would like to track for hovering. This StackOverflow thread shows a simple approach with a parent div having the class "section". It contains two elements that should both have a border around when hovering (code snippet is cited from this answer post):

<html>  <style type="text/css">    .section { background:#ccc; }    .layer { background:#ddd; }    .section:hover img { border:2px solid #333; }    .section:hover .layer { border:2px solid #F90; }  </style></head><body>  <div class="section">    <img src="myImage.jpg" />    <div class="layer">Lorem Ipsum</div>  </div></body></html>

How to make current :hover element be on top when all elements are using the same class

Just add z-index at .book:hover.

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
  z-index: 1;
}

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

Hover for elements underneath others

You have to check for a mouse hit inside each child div; Here's a fiddle for it https://jsfiddle.net/6rx18d56/1. The hit test:

function inside(a, x, y) {
  var l = a.offset().left;
  var t = a.offset().top;
  var r = l + a.outerWidth(true);
  var b = t + a.outerHeight(true);

  return l <= x && x <= r && 
         t <= y && y <= b;
}

EDIT:

Yeah, lol, I knew that was coming. Check out https://jsfiddle.net/6rx18d56/2/. I've made it somewhat more generic, hopefully you have some ID and class names rationale in your charts. Anyways, the hit test being the same, we just loop through elements with jQuery, keeping track of the originating overlay and whether a hit has already ocurred:

$(".foo").on("mousemove", function(e) {
  var hit = false;
  var self = $(this);

  $(".x, .y").each(function(ignore, d) {
    if (!hit) {
      if (inside($(d), e.pageX, e.pageY)) {
        self.attr("title", $(d).attr("title"));
        hit = true;
      }
      else {
        self.attr("title", "");
      }
    }
  });
});

Is there a `pointer-events:hoverOnly` or similar in CSS?

I don't think it's possible to achieve your aims in CSS alone. However, as other contributors have mentioned, it's easy enough to do in JQuery. Here's how I've done it:

HTML

<div
  id="toplayer"
  class="layer"
  style="
    z-index: 20;
    pointer-events: none;
    background-color: white;
    display: none;
  "
>
  Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>

CSS (unchanged)

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

JQuery

$(document).ready(function(){
    $("#bottomlayer").hover(
        function() {
            $("#toplayer").css("display", "block");
        },
        function() {
            $("#toplayer").css("display", "none");
        }
    );
});

Here's the JSFiddle: http://www.jsfiddle.net/ReZ9M

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>

Hover over button while still having hover effect of element behind it

#button1 {  position: absolute;  z-index: 100;  top: 10%;  left: 15%;}#label {  position: absolute;  z-index: -10;  border: 1px solid red;  width: 200px;  height: 200px;  text-align: center;}#label span {  color: white;}#label:hover {  background-color: black;}
#label button:hover{  color:white;

<a id="label"><span>Hidden Until Hover</span><button id="button1">Test Button</button></a>

Which properties will be applied on hover event?

Since both the classes have same specificity, the class which is defined later will override conflicting styles.

Thus in your example:

.classA:hover{
  transform: translateX(10px);
  color: white;
}

.classB:hover{
  color: red;
}

classB is defined later so color: red will be applied and since transform: translateX(10px) is not conflicting it will also be applied.

NOTE:

Writing either <div class="classA classB"></div> or <div class="classB classA"></div> will yield the same result.

But if the class definitions were reversed:

.classB:hover{
  color: red;
}

.classA:hover{
  transform: translateX(10px);
  color: white;
}

Then transform: translateX(10px) and color: white will be applied.

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

CSS - Hover Passes Through Elements to Activate Hover on Covered Element