Javascript：悬停元素，在无关元素中更改类

我已经搜索到了广泛的，并且找不到解决方案。Javascript：悬停元素，在无关元素中更改类

我有两个div。一个在另一个的右边。在每个div中，我都有列表元素，但它们绝不是父母或兄弟姐妹，所以我不能使用CSS。

有没有人有一个解决方案，我可以在我的html文档中的任何地方有链接，当它悬停时，更改另一个元素的类，而不管它放置在html文档中的什么位置？例如Javascript。

这个想法是，当我将一个元素悬停在左侧列表中时，它会突出显示与其相关的右侧列表中的元素。

来源

2017-01-12 Streching my competence

你能粘贴html在这里？ – Deep

悬停是jquery，虽然权利 – sweaver2112

和jQuery是JavaScript –

有很多方法可以实现这一点。我创建了一个使用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'); 
    } 
});

Sample

来源

2017-01-12 16:57:23 VladNeacsu

谢谢！我添加了我的头（文件夹中的两个文件名为“js”，路径是正确的），然后是CSS中的css和我的html文档中的html。这是在我的电脑上的一个文件夹中脱机。 divs和造型作品，但我从悬停没有反应。我在这里错过了什么？正如W3学校提示的那样，“js.js”是我放置js的地方。 –

打开浏览器控制台，看它是否输出错误 – VladNeacsu

js.js：1 Uncaught TypeError：$（...）。on不是函数（...）（匿名函数）@ js.js：1 –

jQuery是一个相当大的库。我强烈建议你在纯JavaScript中做这个，如果你不在你网页的其他地方使用Jquery的话。这里是我创建的一个例子，当另一个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 depanding哪一个是由函数被调用的例子：

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" 
    }

}

来源

2017-01-12 17:12:05 Benneb10

这可以工作，但会覆盖目标元素的类 – VladNeacsu

您可以在该元素上添加一个单独的类，以更改边界/背景，就像我在第二个示例中那样。它不覆盖它。用.class调用non hightlighted div，用.class.hightlightedClass调用突出显示的div。第二个是更具体的，所以它会覆盖任何正常的.class类型（我希望我是有道理的） – Benneb10

完美清晰，但你总是必须维护'otherDiv'类的代码，或任何类元素之前。 jQuery通过添加和删除类正确处理。使用JavaScript可以轻松完成，但jQuery更易于理解。 – VladNeacsu

Javascript：悬停元素，在无关元素中更改类

回答

相关问题