使用javascript悬停在Access元素上
我有一个章节，里面有三篇文章。当我将鼠标悬停在每篇文章上时，我希望文章中的适当文本滑过20px，但是文章的定位方式是文本沿左边缘对齐，但我希望无论鼠标位于特定文章的哪个位置，文本都可以滑过。
我有一个JS函数，但是如何访问悬停在其上的特定文章呢？我如何用Javascript做到这一点呢？(不是jQuery)
我目前有一个div，如下面链接的jsfiddle所示。我希望当鼠标悬停在蓝色框的任何部分时，即使文本没有覆盖整个宽度，文本也会滑过。
https://jsfiddle.net/g8nzcurf/
#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>回答 1
Stack Overflow用户
发布于 2018-08-03 06:16:43
关于您的更新示例和下面的注释，您可能希望将一个类放在您希望悬停在其上的那些类型的元素上，因此我正在更新querySelector。您可能应该像提示您提供代码的人建议的那样使用CSS，但既然您要求使用JS，我将对其进行一点更新，以防您对学习和实验更感兴趣。
您可以使用mouseover event将事件侦听器添加到元素中，并在那里更改样式。您可能都想添加一个mouseleave事件来重新设置样式。下面是一个简单的示例，它对页面上所有附加了hover类的div执行此操作(在本例中不是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设置内联样式是一种糟糕的做法。如果你应该在moveover上添加和删除类，那么你的样式表应该引用这些类来处理一些事情，比如改变它的外观。在这种情况下，你不会去做div.style.left，你会去做相当于添加和删除一个类的普通js。所以不是div.style.left = '-20px'..。你会这样做：
div.classList.add('hovered-over');并且有一些这样的css (也不是很好的CSS)：
.hovered-over { left: -20px }由于这只是一种心理练习，如果您正在寻找合适的方法，那么您可能应该使用CSS，因此我不会介绍如何删除类。答案就在那里，但是如果你想完成这个特殊的事情，CSS已经覆盖了它，并且在大多数情况下是处理它的合适的地方。
https://stackoverflow.com/questions/51662712
复制相似问题