悬停时更改主体背景颜色

离开的味道

         <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方式

Sumesh TG

$(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实现此目的。希望这会帮助你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。