将鼠标悬停在伪元素后以更改样式

Question

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

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

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

任何想法将不胜感激。谢谢你的帮助。代码如下：

Codepen：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>

Codepen：https://codepen.io/bergy/pen/YoxZBp

（编辑：由于 JS 在鼠标移动功能之外获取矩形，如果元素被移动它将停止工作。现在它在鼠标移动中查找矩形，因此修复了错误）