时间戳

首页 > 解决方案 > 将鼠标悬停在嵌套在其中的 div 上时更改正文背景

javascript - 将鼠标悬停在嵌套在其中的 div 上时更改正文背景

问题描述

我试图操纵这个论坛上小提琴中发生的事情，但我遇到了一些麻烦，我不确定我哪里出错了。

我在这里创建了我自己的笔，其中包含我网站上的精简版本。

基本上我想要做的是，每当您将鼠标悬停在图像或灰色框上时，主体背景颜色都会改变。（理想情况下是淡入/淡出类型的交互，但如果淡入淡出部分可以通过 CSS 完成，我可以做到）。

我尝试将 getElementById（来自示例）更改为getElementsByClassName，因为我有该类的多个实例，但这似乎不起作用。我已经在 getElementById 中添加了它，它在应用的地方（在图像上）有效，但我认为这不是最佳实践，因为我将拥有该类的多个实例。

免责声明：我对 JS 了解不多，所以如果有更好的方法可以做到这一点，我很乐意尝试一下！

我只在帖子中添加了 JS 以保持内容简洁。代码笔中的 HTML 和 CSS。

$(document).ready(function(){  
  window.onload = function(){
    var block1 = document.getElementById('hover-color1');
    var body = document.body;
    block1.onmouseover = function() {
        body.className = 'hover-color1';
    }
    block1.onmouseout = function() {
        body.className = '';
    }
  };
});

标签： javascriptjquery

解决方案

您正在寻找背景颜色的过渡。在你的 body CSS 中添加 background-color 的过渡，然后在你的悬停中更改 body，设置新的背景颜色，过渡将触发并使其从一种颜色动画到另一种颜色。

Javascript：

  1. 使用节点选择器获取类元素以创建 nodeList -> querySelectorAll 返回 nodeList
  2. 遍历列表以获取 event.target
  3. 使用 mouseover 和 mouseout 事件使用 classList.add/remove 添加/删除类
    const block1 = document.querySelectorAll('.hover-color1')
    block1.forEach(img => {
      img.addEventListener('mouseover', e => {
        document.body.classList.add('hover-color1')
      })
      img.addEventListener('mouseout', e => {
        document.body.classList.remove('hover-color1')
      })
    })

CSS：为背景上的 body 添加过渡到 CSS，然后在悬停时，背景更改将从 body 中设置的背景色过渡到 body.hoverElement 背景色。

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #1a1b1f;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -ms-transition: background-color 1s linear;
  transition: background-color 1s linear;
}

body.hover-color1 {
  background-color: red;
}


$(document).ready(function() {
  window.onload = function() {
    const block1 = document.querySelectorAll('.hover-color1')
    block1.forEach(img => {
      img.addEventListener('mouseover', e => {
        document.body.classList.add('hover-color1')
      })
      img.addEventListener('mouseout', e => {
        document.body.classList.remove('hover-color1')
      })
    })
  }
})
.w-layout-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #1a1b1f;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  -webkit-transition: background-color .5s linear;
  -moz-transition: background-color .5s linear;
  -o-transition: background-color .5s linear;
  -ms-transition: background-color .5s linear;
  transition: background-color .5s linear;
}

body.hover-color1 {
  background-color: red;
}

.section {
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 30px;
  padding-left: 30px;
}

img {
  display: block;
  max-width: 1200px;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

.paragraph {
  margin-bottom: 20px;
  border-top: 1px none #525254;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #525254;
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: 0.3px;
}

.relative-block {
  position: relative;
}

.heading-3.display-mono {
  font-family: 'IBM Plex Mono', sans-serif;
  color: #1a1b1f;
  font-size: 32px;
  letter-spacing: 1.1px;
}

.heading-4.display-h6 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 20px;
  line-height: 1.5em;
  font-weight: 400;
}

.link {
  display: inline-block;
  font-family: 'IBM Plex Mono', sans-serif;
  line-height: 1.5em;
  text-decoration: none;
}

.portfolio-block-left {
  position: relative;
  max-width: 1440px;
  margin: 50px auto;
}

.portfolio-grid-left {
  position: relative;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}

.portfolio-image.fade-in-1st {
  position: relative;
  z-index: 1;
}

.portfolio-title {
  position: relative;
  z-index: 2;
  max-width: 570px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 25px;
  background-color: #ccc;
}

.portfolio-block-right {
  position: relative;
  max-width: 1440px;
  margin: 50px auto;
}

.portfolio-grid-right {
  position: relative;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}

.max-1440 {
  width: 100%;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

#w-node-link-block-825bf526 {
  grid-column-end: 7;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-row-start: 1;
}

#w-node-eb6e1164-1454-9dc3-9597-76f59d0186bb-825bf526 {
  grid-column-end: 8;
  grid-column-start: 4;
  grid-row-end: 5;
  grid-row-start: 3;
  align-self: end;
  justify-self: end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="padding-50px section">
  <div class="portfolio-block-left">
    <div class="w-layout-grid portfolio-grid-left">
      <a id="w-node-link-block-825bf526" href="#" class="portfolio-image fade-in-1st w-inline-block">
        <img class="hover-color1" src="https://source.unsplash.com/random/1200x400" alt=""></a>
      <div id="w-node-eb6e1164-1454-9dc3-9597-76f59d0186bb-825bf526" class="portfolio-title hover-color1">
        <h3 class="heading-3 display-mono">Title</h3>
        <h4 class="heading-4 display-h6">Secondary Title</h4><a href="#" class="link">View Project</a>
      </div>
    </div>
  </div>
</div>

推荐阅读