我有一个章节,里面有三篇文章。当我将鼠标悬停在每篇文章上时,我希望文章中的适当文本滑过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>
发布于 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
复制相似问题