Javascript:悬停元素，更改不相关元素中的类
Javascript:悬停元素，更改不相关元素中的类
提问于 2017-01-13 00:49:13
我到处找，都找不到解决办法。
我有两个div。一个在另一个的右边。在每个div中，我都有列表元素，但它们不是父元素或兄弟元素，所以我不能使用CSS。
有没有人有一个解决方案，我可以在我的html文档中的任何地方都有一个链接，当悬停时，会改变另一个元素的类，而不管它放在html文档中的什么位置。例如，Javascript。
这个想法是，当我悬停在左侧列表中的元素时，它将突出显示右侧列表中被认为与其相关的元素。
回答 2
Stack Overflow用户
发布于 2017-01-13 00:57:24
有许多方法可以实现这一点。我已经创建了一个示例，它使用jQuery操作mouseenter mouseleave事件(基本上是hover)的另一个元素上的类。
<div class="red">
x
</div>
<div class="green">
y
</div>
$('.red').on('mouseenter mouseleave', function() {
if ($('.green').hasClass('hover')) {
$('.green').removeClass('hover');
} else {
$('.green').addClass('hover');
}
});Stack Overflow用户
发布于 2017-01-13 01:12:06
Jquery是一个相当大的库。如果你在网页中没有使用Jquery，我强烈建议你用纯javascript来做这件事。下面是我创建的一个示例，当一个div的类被一个简单的If语句悬停时，它会更改另一个div的类。
https://jsfiddle.net/c16rvt0y/1/
function highlightDiv(){
if (document.getElementById("highlightMe").className === "otherDiv"){
document.getElementById("highlightMe").className = "otherDiv otherDivHighlighted"
} else {
document.getElementById("highlightMe").className = "otherDiv"
}
}下面是一个示例，它以独立的div为目标，依赖于函数调用的div：
https://jsfiddle.net/c16rvt0y/2/
function highlightDiv(highlightMeID){
if (document.getElementById(highlightMeID).className === "otherDiv"){
document.getElementById(highlightMeID).className = "otherDiv otherDivHighlighted"
} else {
document.getElementById(highlightMeID).className = "otherDiv"
}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41618706
复制相关文章
相似问题
腾讯云开发者
