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将rects移到了鼠标移动功能之外，如果元素被移动，它将停止工作。现在它在鼠标移动中寻找rects，因此该错误已得到修复）

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

1 个答案: