javascript - 悬停时更改主体背景颜色

Question

<分区>

Answer 1

不幸的是，CSS 中没有父/祖先选择器。因此，您将需要一个 JS 解决方案来设置主体或祖先元素的样式。

您可以在没有 jQuery 的情况下轻松地做到这一点。

const elements = document.querySelectorAll('article');

elements.forEach(elem => {
  elem.addEventListener("mouseenter", function(event) {
    const bg = document.querySelector('.projects-list')

    const color = event.target.getAttribute("data-color");

    bg.style.backgroundColor = color;
  }, false)
})

.projects-list {
  padding: 20px;
}

img {
  width: 100%;
}

<div class="projects-list home-1">
  <article data-color="orange" class="whispers">
    <h1>Whispers</h1>
    <figure>
      <a href="">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="purple">
    <h1>Victoria</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="blue">
    <h1>for sasha</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="red">
    <h1>old and blue</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

  <article data-color="green">
    <h1>offf barcelona</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

</div>