Question

我有一个小节，里面有三篇文章。当我将鼠标悬停在每篇文章上时，我希望该文章中的相应文本滑过20像素，但是文章的放置方式是使文本与左侧边缘对齐，但是我希望能够使文本滑动无论在那篇文章中我的鼠标处于何处。

我有一个JS函数，但是如何访问被悬停的特定文章？我该如何使用Javascript？（不是jQuery）

我目前有一个div，如下面的jsfiddle所示。我希望当鼠标悬停在蓝色框的任何部分上时，即使文本没有覆盖整个宽度，文本也要滑过。

#test{
  width:200px;
  height:200px;
  background-color:blue;
}

#text{
  width:50px;
}


<div id="test">
  <div id="text">
    This is a test.This is a test.This is a test.This is a test.This is a test.
  </div>
</div>

Answer 1

关于您的更新示例和下面的注释，您想将一个类放在要悬停的那些元素上，因此我要更新querySelector。您可能应该使用CSS，就像提示您提供代码的人所建议的那样，但是由于您要求使用JS，因此我会对其进行一些更新，以防您对学习和实验更感兴趣。

您可以使用mouseover事件将事件侦听器添加到元素，并在其中更改样式。您可能都想添加一个mouseleave事件以对其设置样式。下面是一个简单的示例，它对页面上所有附加了div类的hover都执行了此操作（此示例不是id！）。

<!-- html -->
<div class="hover"></div><div class="hover"></div>



const hoverDivs = document.querySelectorAll('.hover');
hoverDivs.forEach((div)=>{
div.addEventListener('mouseover',(event)=>{
    div.style.left = "-20px"
})
div.addEventListener('mouseleave',(event)=>{
    div.style.left = "0px";
});

}）;

但这听起来像是在寻找解决方案时，您可能应该只使用CSS。用JS或HTML这样的内联样式的东西是不好的做法。如果有什么需要在移动时添加和删除类的，则样式表应引用这些类来处理诸如更改外观的操作。在那种情况下，您不会执行div.style.left，而是在香草js中添加和删除类。因此，您不用这样做，div.style.left = '-20px' ...

 div.classList.add('hovered-over');

还有一些这样的CSS（也不是很好的CSS）：

.hovered-over { left: -20px }

由于这只是脑力劳动，如果您正在寻找正确的方法，那么您可能应该使用CSS，但我不会显示如何删除类。答案就在那里，但是如果您想使这一特定的事情完成，那么CSS可以解决这一问题，并且在大多数情况下是处理此问题的合适地方。

Answer 2

与mentioned by Obsidian Age一样，您可以使用:hover伪类在悬停时选择它们。您可以将其与子代组合器结合使用，以在满足某些条件时有选择地将样式应用于其他元素。在这种情况下，您可以根据需要使用.article:hover .text。

编辑：如@Kaiido所述，您可以将伪类与querySelector一起使用。因此，在mouseenter事件中，您可以使用document.querySelector('.article:hover .text')选择相关的文本div，如以下代码段所示：

var articleDivs = document.querySelectorAll('.article');
var i;

for (i = 0; i < articleDivs.length; i++) {
  articleDivs[i].addEventListener('mouseenter', function (e) {
    var textDiv = document.querySelector('.article:hover .text');
    // do something with the div
    console.log(textDiv);
  });
}

.article {
  width:200px;
  height:200px;
  background-color:blue;
  margin-bottom: 20px;
}

.text{
  width:50px;
  color: #ddd;
}

.article:hover .text {
  margin-left: 20px;
}

<div class="article">
  <div class="text">
    This is a test. This is a test. This is a test.
  </div>
</div>

<div class="article">
  <div class="text">
    This is also a test. This is also a test. This is also a test.
  </div>
</div>

用javascript悬停的访问元素

2 个答案: