javascript - 将鼠标悬停在元素之后的伪元素上以更改样式

Question

我正在尝试创建一个简单的演示，其中滚动一个伪元素将改变其父元素的样式。也就是说，我希望能够将图片右上角的字母e翻过来，然后显示文字内容。

我已经设法让它在滚动图像本身时工作，但不是伪元素。我已经注释掉了滚动图像本身的工作代码，并没有注释掉不正确的伪滚动代码。

我想知道你是否真的可以在 JS 中选择伪元素，因为它在尝试选择任何伪元素时显示 null。

如有任何想法，我们将不胜感激。谢谢你的帮助。代码如下:

代码笔:https://codepen.io/anon/pen/NZvdzr

/*document.querySelector('#img-wrap').onmouseover = function() {
  document.querySelector('#caption-wrap').style.opacity = 1;
}
document.querySelector('#img-wrap').onmouseout = function() {
  document.querySelector('#caption-wrap').style.opacity = 0;
}*/

document.querySelector('#img-wrap:after').onmouseover = function() {
  document.querySelector('#caption-wrap').style.opacity = 1;
}
document.querySelector('#img-wrap:after').onmouseout = function() {
  document.querySelector('#caption-wrap').style.opacity = 0;
}

#img-wrap {
  width: 30%;
  position: relative;
}
#caption-wrap {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
img {
  width: 100%;
}
#img-wrap:after {
  content: 'e';
  position: absolute;
    top: 0;
  right: 0;
}

<div id='img-wrap'>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-bCnPPMYp6QIfrCr2BR-imm_Sw9IHCXIXzE5fei7R8PTBKYGd'>
  <div id='caption-wrap'>
    <p>some text will appear</p>
  </div>
</div>

Answer 1

你不能监听伪元素，但是你可以通过window.getComputedStyle() 找到一些有趣的信息。下面是一个演示。

我正在听鼠标在图像元素上移动并比较坐标以查看它们是否落在伪元素的矩形之间。

每个公差上有一个 2px 的填充，如果您希望鼠标悬停在检测上时更宽容，您可以将其更改为其他值。

CanIUse.com说所有浏览器都支持 window.getComputedStyle()，但我还没有测试它们是否都返回正确的坐标信息以使其正常工作——你应该在使用前跨浏览器测试它。

var element = document.querySelector('#img-wrap') 

element.onmousemove = function(event){
  var elementRect = element.getBoundingClientRect()
  var pseudo = window.getComputedStyle(element, ':after')
  var pseudoRect = { 
    top: parseFloat(pseudo.top), 
    left: parseFloat(pseudo.left), 
    width: parseFloat(pseudo.width),
    height: parseFloat(pseudo.height),
  }    
  var mouseX = event.clientX
  var mouseY = event.clientY
  var yTolTop = elementRect.top + pseudoRect.top - 2
  var yTolBot = elementRect.top + pseudoRect.top + pseudoRect.height + 2
  var xTolLeft = elementRect.left + pseudoRect.left - 2
  var xTolRight = elementRect.left + pseudoRect.left +  pseudoRect.width + 2
  //console.log(elementRect.top, yTolTop, mouseY, yTolBot, " | ", elementRect.left, xTolLeft, mouseX, xTolRight)
  if(mouseY > yTolTop  && mouseY < yTolBot && mouseX > xTolLeft  && mouseX < xTolRight){
    document.querySelector('#caption-wrap').style.opacity = 1;
  }else{
    document.querySelector('#caption-wrap').style.opacity = 0;
  }
}

element.onmouseout = function(){
  document.querySelector('#caption-wrap').style.opacity = 0;
}

#img-wrap {
  width: 30%;
  position: relative;
}
#caption-wrap {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
img {
  width: 100%;
}
#img-wrap:after {
  content: 'e';
  position: absolute;
    top: 0;
  right: 0;
}

<div id='img-wrap'>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-bCnPPMYp6QIfrCr2BR-imm_Sw9IHCXIXzE5fei7R8PTBKYGd'>
  <div id='caption-wrap'>
    <p>some text will appear</p>
  </div>
</div>

代码笔:https://codepen.io/bergy/pen/YoxZBp

(编辑:由于 JS 在鼠标移动功能之外获取矩形，如果元素曾经移动过，它将停止工作。现在它在鼠标移动中查找矩形，因此错误已修复)