Javascript 当鼠标悬停在另一个类上时，如何更改一个类的css？

我不熟悉css，尤其是combinators，但当我将鼠标悬停在h1元素上时，我试图更改p元素的css，这两个元素都位于类“a”的div中 但我不知道怎么做。这是我的代码

HTML

---

那么我做错了什么呢？

您不需要再次以

div

元素为目标

所有段落

第一段

div.a h1:hover~p{color:red；}

这是一个标题
这是一段

$('div.a h1').hover(function() {
        $(this).siblings('p').css(color: red;);
    }, function() {
        $(this).siblings('p').css( << Previous Css >> );
    }
});

这是一段

$('div.a h1').hover(function() {
        $(this).siblings('p').css(color: red;);
    }, function() {
        $(this).siblings('p').css( << Previous Css >> );
    }
});

其他一些文本。

此解决方案应适用于：

div.a > h1:hover + p {
    color:red;
}

>h1:hover

选择h1:hover元素，父元素为div，类为“a”

---

+p

要选择紧跟在h1之后的p元素：悬停元素

如果使用jQuery，可以使用以下代码转换段落

$('div.a h1').hover(function() {
        $(this).siblings('p').css(color: red;);
    }, function() {
        $(this).siblings('p').css( << Previous Css >> );
    }
});

$（'div.a h1'）。悬停（函数（）{
$（this.this（'p'）.css（颜色：红色；）；
}，函数（）{
$（this.this（'p'）.css（>）；
}
});

Try

div.ah1:hover~p{color:red；}

示例