悬停时更改主体背景颜色

时间:2018-10-25 06:34:28

标签: javascript html css

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

SELECT 
  dt.ID,
  @row_num := IF(@aid <> dt.animalid, 1, @row_num + 1) as LactationID,
  concat(@row_num, ' - ', calvDate) AS CalvDateLactationID,
  concat(@row_num, ' - ', animalid) AS animalidLactationID, 
  @aid := dt.animalid AS animalid,  
  dt.calvDate 
FROM 
(
 SELECT ID,animalid,calvDate 
 FROM calvingdatecombined 
 WHERE calvDate > '0000-00-00' 
 ORDER BY animalid, calvDate, ID
) AS dt 
CROSS JOIN (SELECT @row_num := 0, 
                   @aid := '') AS user_init_vars 
ORDER BY dt.ID
$(document).ready(function(){
$('img').mouseover(function(){
  $('body').css('background-color',$(this).data('color'));
});

});

使用js实现此目的。希望对您有帮助。

答案 2 :(得分:0)

这是完整的代码束。进行一些更改后,我想向您致歉。

<!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>