将鼠标悬停在html文章上，然后更改另一个div的背景

Question

我想将鼠标悬停在html文章上，并像这样更改背景：

article:hover {background:#FFFFF0;}

并将文章h3更改为此：

article h3 {background:green}

我想我想用一个jQuery函数来做到这一点。

Answer 1

您不需要jQuery。您可以在CSS中进行尝试：

article:hover {background:#FFFFF0;}

article:hover h3 {background:green;}

如果您使用的是SCSS，则更易于阅读：

article:hover {
  background: #FFFFF0;
  h3 {
    background: green;
  }
}

Answer 2

您可以在使用jQuery的悬停事件上使用toggle类。

$(function () {


    $('article').hover(function () {

        $('article h3').toggleClass('highlight');
    })

});

背景颜色的样式：

<style>
.highlight {
    background: green;
} </style>