Javascript 更改另一个标记悬停时的属性

我有两个文本标题。当用户将鼠标悬停在第二个标题上时，我想更改第一个标题的颜色，反之亦然

#first{
}
#第二{
}

第一个标题
第二个标题

，当您键入第一个元素时，可以使用CSS元素+元素选择器执行此操作 但是对于第二个，您将需要使用javascript和属性，请参见代码段

window.onload=function（）{
document.body.addEventListener（“鼠标悬停”，函数（e）{
e=e | | window.event；
var targetElem=e.target | | e.src元素；
开关（targetElem.nodeName）{
案例“H1”：
悬停（targetElem）；
打破
违约：
var heading=document.getElementsByTagName（“h1”）；
对于（变量i=0；i

正文{
宽度：100%；
高度：100vh；
}

第一个标题
第二个标题
第一个标题
第二个标题
第一个标题
第二个页眉

使用CSS，您可以将

#第一个

和

#第二个

边距

设置为

0

；将

#first

、

#first:hover+#second

和

#second:hover

设置为相同的默认值；将

#second

，

#first:hover

，

body:hover h1:not（#second）

设置为相同的值，以切换

处每个相邻元素的属性：hover

#第一、第二{边距：0}
#首先，#第一：悬停+#第二，#第二：悬停{背景：红色}
#第二，第一：悬停，主体：悬停h1：非（#第二）{背景：绿色}

第一个标题
第二个标题

您可以通过一种方式实现这一点，但不幸的是，使用CSS无法实现另一种方式。如下面的JSFIDLE演示所示，下面的代码允许您将鼠标悬停在第一个标题上，并更改第二个标题的颜色。但是，您不能反过来这样做，因为您悬停的项目必须位于要在HTML文档中更改其CSS的项目之上。更多信息请参见SO答案

#first:hover + #second {
    color:red;
}

不过，您可以使用javascript实现这一功能，我还提供了另一个JSFIDLE演示（链接在底部），向您展示如何获得所需的结果。Javascript允许您使用以下代码选择文档中的任何元素：

var first = document.getElementById("first");
var second = document.getElementById("second");

然后，您可以添加一个事件侦听器来检测该元素何时悬停：

first.onmouseenter = function(){

}

如果元素已被悬停，则可以更改页面上任何其他元素的CSS（即使它位于悬停元素之前）：

---

您可以使用JavaScript这样做：

const first=document.getElementById（'first'）；
const second=document.getElementById（'second'）；
const toggleActive=selector=>selector.classList.toggle（'active'）；
const addHoverListeners=（触发器，目标）=>{
trigger.addEventListener（'mouseover'，（）=>toggleActive（target））；
trigger.addEventListener（'mouseout'，（）=>toggleActive（target））；
};
addHoverListeners（第一、第二）；
addHoverListeners（第二，第一）
.active{color:dodgerblue；}
第一个标题
第二个标题
如果要使用jQuery进行求解

或者使用javascript`

使用jQuery，您可以非常快速地完成这项工作

您可以附加事件
mouseenter
和
mouseleave

运行代码片段：


var$second=$（'#second'）；
变量$first=$（“#first”）；
$second.on（'mouseenter'，（）=>{
$first.addClass（'over-first'）；
}).on（'mouseleave'，（）=>{
$first.removeClass（'over-first'）；
});
$first.on（'mouseenter'，（）=>{
$second.addClass（'over-second'）；
}).on（'mouseleave'，（）=>{
$second.removeClass（'over-second'）；
});
#首先{
}
#第二{
}
.首先{
颜色：橙色！重要；
}
.超过一秒{
颜色：红色！重要；
}

第一个标题

第二个标题
可能重复@denmch我认为这是学习过程的一部分，是什么让你确信我知道的不够多…@denmch你可以在每页使用多个
标记。HTML5之前，只使用一个h1元素帮助SEO引擎，这些引擎现在有更好的算法。误用这些标签仍然会对SEO产生负面影响。@denmch这条评论有什么“错误”吗？@denmch建议如何在JS上做这件事，我们将不胜感激。“你可以用一种方法来做，但不幸的是，CSS不能用另一种方法。”这是不准确的。不幸的是，当你将鼠标悬停在“第二个标题”（“第一个标题”）上时，什么也不会发生（不变）
first.onmouseenter = function(){
    second.style.color = "red";
}

//onmouseleave changes the colour back when the mouse leaves the element

first.onmouseleave = function(){
    second.style.color = "black";
}

second.onmouseenter = function(){
    first.style.color = "red";
}

//onmouseleave changes the colour back when the mouse leaves the element

second.onmouseleave = function(){
    first.style.color = "black";
}

$("#first").mouseover(function(){
    $("#second").css({
    'background-color' : '#ccc'
  });
}).mouseout(function() {
  $("#second").css({
    'background-color' : 'transparent'
  });
});

$("#second").mouseover(function(){
    $("#first").css({
    'background-color' : '#ddd'
  });
}).mouseout(function() {
  $("#first").css({
    'background-color' : 'transparent'
  });
});

var first = document.getElementById('first');
var second = document.getElementById('second');

first.addEventListener('mouseover', function () {
  second.style.backgroundColor = '#ccc';
});
first.addEventListener('mouseleave', function () {
  second.style.backgroundColor = 'transparent';
});

second.addEventListener('mouseover', function () {
  first.style.backgroundColor = '#ddd';
});
second.addEventListener('mouseleave', function () {
  first.style.backgroundColor = 'transparent';
});