0

The following code adding a red shadow on every DOM element on hover, how can i mark only that element what is under the cursor?

$( "html *" ).hover(function() {
      $( this ).css('box-shadow','inset 0 0 3px red');
    }, function() {
      $( this ).css('box-shadow','none');
    }
  );
});

Here is my jsfiddle: https://jsfiddle.net/eapo/7Lyt9qeb/2/

eapo
  • 1,053
  • 1
  • 19
  • 40

3 Answers3

2

You want to take a look at document.elementFromPoint

Using the mousemove event, the target is what you are after

document.body.addEventListener("mousemove",function(e){
  // clear "hovered" class
  var elems = document.getElementsByClassName("hovered");
  for(var a=elems.length-1; a>=0; a--){elems[a].classList.remove("hovered");}

  //add "hovered" class to target
  e.target.classList.add("hovered");
});
div{
  display:inline-block;
  outline: 1px solid;
  font-size:0px;
  width:50%;
  height:50%;
}
div.hovered{
  background-color:rgba(255,0,0,0.5);
}
body{
  width:400px;
  height:400px;
}
<body>
<div>
  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>
</body>
Isaac
  • 11,409
  • 5
  • 33
  • 45
  • I can't see any connection with my question in this answer!? – eapo Oct 10 '16 at 23:45
  • @eapo did you even look at https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint ? Combine it with mouse coordinates and you have your element – Isaac Oct 11 '16 at 00:15
  • i want without cursor detection, because i don't use mouse, only if there is no other choice. – eapo Oct 11 '16 at 00:20
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:hover hover is exclusive to a "pointing device" – Isaac Oct 11 '16 at 00:23
1

Instead of :hover, I suggest adding two delegated event listeners:

  • A mouseenter event listener to detect when an element enters an element. It doesn't bubble, so it will only be invoked on the deepest hovered element.
  • A mouseout event listener. This event happens even when the mouse moves from an element to a descendant.

$("html").on('mouseenter', '*', function() {
  this.style.boxShadow = 'inset 0 0 5px red';
}).on('mouseout', '*', function(e) {
  this.style.boxShadow = '';
  console.log(e.target);
});
body {
  width: 400px;
}
div {
  min-height: 20px;
  border: 1px solid;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • no, i want to select parents to, but only those what is the deepest in the selection. https://jsfiddle.net/eapo/7Lyt9qeb/3/ – eapo Oct 10 '16 at 23:54
  • @eapo Please define "deepest in the selection" – Oriol Oct 11 '16 at 00:13
  • i want to mark only that element what is under the cursor with js – eapo Oct 11 '16 at 00:14
  • nice trick with visuals, but i can't use to select that DOM. But this can be the other question. thank you. – eapo Oct 11 '16 at 00:42
0

JavaScript is not needed for this use the css selector last-child with hover

body:last-child:hover {
    background: #ff0000;
}

Edit I misunderstood your question this is not possible with just css here is a jQuery selector to get the most deepest element.

$('body *:not(:has("*"))');
Darkrum
  • 1,325
  • 1
  • 10
  • 27