Question

以下代码在悬停时的每个DOM元素上添加一个红色阴影，我如何只标记该元素在光标下的内容？

#include <iostream>
#include <iomanip>
#include <cmath>
using namespace std;

// complete the following three functions

// The function InputBaseHeight will read the values for the Base and Height of a Triangle from the keyboard
// and pass the Base and Height values back through a reference parameter.

void InputBaseHeight(double height, double Base)
{
cout << "\n Enter height = "; cin >> height;
cout << "\n Enter Base = "; cin >> Base;
}

// The function TriangleArea will receive the Base and Height values through a value parameter and
// return the Area of the Triangle through the function name

double TriangleArea(double height, double Base, double Area)
{
// Area = 1/2 * Base * Height
return Area = Base/2 * height;


}
// The function PrintArea will receive the Area value through a value parameter
// and label and print the Area value.


void PrintArea(double height, double Base, double Area)
{


cout << "\n The area of the triangle = " << Area;
}


int main()
{
   double Base = 0.0, height = 0.0, Area = 0.0;

// call InputBaseHeight function

InputBaseHeight(height, Base);

// call TriangleArea function

TriangleArea(height, Base, Area);

// call PrintArea

PrintArea(height, Base, Area);

cout<< "\n\n The End";
return 0;

}

这是我的jsfiddle：Microsoft's Documentation

Answer 1

您想看看document.elementFromPoint

使用mousemove事件，target就是您的目标

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>

Answer 2

我建议添加两个委派的事件监听器，而不是:hover：

用于检测元素何时进入元素的mouseenter事件侦听器。它不起泡，所以它只会在最深的悬停元素上调用。
mouseout事件监听器。即使鼠标从元素移动到后代，也会发生此事件。

$("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>

Answer 3

使用带有悬停的css选择器last-child

不需要JavaScript

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

修改我误解了你的问题这是不可能只有css这里是一个jQuery选择器来获得最深的元素。

$('body *:not(:has("*"))');

只影响没有父母的徘徊的孩子

3 个答案: