悬停时更改正文背景颜色[重复]答案

【问题标题】：Change body background color on hover [duplicate]悬停时更改正文背景颜色[重复]
【发布时间】：2018-10-27 05:10:41
【问题描述】：

         <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>

现在我想在悬停在任何这些图像上时将 body 标签背景更改为不同的颜色，例如，第一张图像使背景变黑，第二张图像变红等等。

所以我的问题是：有没有办法在悬停时选择 CSS 上的另一个元素？

例如：

article:hover { here i want to say like body: background = 'whatever' }

就像我们在 JS 中改变事物的方式一样。我是用 JS 做的，但我觉得肯定有更简单的 CSS 方式

【问题讨论】：

stackoverflow.com/questions/1014861/…
见stackoverflow.com/a/8114664/3967379
不...没有更简单的 CSS 方式...根据子级设置父级样式，您必须使用 JS 或 jquery

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

$(document).ready(function(){
$('img').mouseover(function(){
  $('body').css('background-color',$(this).data('color'));
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img class="img" src="https://picsum.photos/200/200?random"alt="" data-color="pink">
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="https://picsum.photos/200/200?random"alt="" data-color="grey">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="https://picsum.photos/200/200?random"alt="" data-color="red">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <img src="https://picsum.photos/200/200?random"alt="" data-color="green">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="https://picsum.photos/200/200?random" alt="" data-color="blue">
                        </a>
                    </figure>
                </article>

         </div>
         </body>

使用js来实现。希望这会对你有所帮助。

【讨论】：

非常感谢你，你真的帮了我一个大忙，上帝保佑你

【解决方案3】：

这是完整的一堆代码。由于我做了一些更改，所以我想提前道歉。

<!DOCTYPE html>
<html>
<head>
<style>
body   {  background:#e5e5e5;}
.projects-list-home-1{
text-align:center;
}

.whispers{
text-decoration:none;
}


</style>
<script>
function bgChange(bg) {
    document.body.style.background = bg;
}
</script>
</head>
<body>
<div class="projects-list-home-1">
                <article>
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html"  onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Khaki" class="whispers">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Palegreen" class="whispers">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Orange" class="whispers">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>
</body>


</html>

【讨论】：

如果您还需要了解其他信息，请随时询问。