如何更改鼠标输入的背景？答案

【问题标题】：How can I change background on mouseenter?如何更改鼠标输入的背景？
【发布时间】：2022-01-22 23:04:04
【问题描述】：

我有一个简单的页面，我想使用 mounter 按钮更改背景图像。我在后台有三个按钮。

问题是，我想添加淡入淡出效果，我做了什么（我在 CSS 中添加了过渡：1.5s）。但是，当我在按钮之间移动得太快时，淡入/淡出效果无法正常工作。

$(document).ready(function() {
  var svatba = $(".svatbauvod");
  var promo = $(".promouvod");
  var after = $(".afteruvod");
  var pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod1.jpg)');
  });

  promo.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod2.jpg)');
  });

  after.on('mouseenter', function() {
    pozadi.css('background-image', 'url(img/uvod3.jpg)');
  });
});

.uvod-body {
  background-image: url("/img/uvod1.jpg");
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <main class="uvod-body">
      <div class="uvod-back">
          <h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
          <h1><a href="#" class="promouvod">Promo videa</a></h1>
          <h1><a href="#" class="afteruvod">After movie</a></h1>

      </div>
   </main>
</body>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

如果您将图像移动到类并使用 jQuery 更改这些类中的哪些是活动的，则可以使用本机 CSS 过渡来实现您的效果。

这是一个示例。我无权访问您引用的图像，因此我使用了颜色。淡化效果是一样的。

请注意，我们使用的是 addClass() 和 removeClass()。您可以一次添加或删除多个类，方法是在空格分隔的字符串中指定它们。

我已将其中一个类应用于要启动的元素。这类似于您应用的background-image 属性。

$(document).ready(function() {
  var svatba = $(".svatbauvod");
  var promo = $(".promouvod");
  var after = $(".afteruvod");
  var pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.addClass('uvod1').removeClass('uvod2 uvod3');
    //.css('background-image', 'url(img/uvod1.jpg)');
  });

  promo.on('mouseenter', function() {
    pozadi.addClass('uvod2').removeClass('uvod1 uvod3');
    //.css('background-image', 'url(img/uvod2.jpg)');
  });

  after.on('mouseenter', function() {
    pozadi.addClass('uvod3').removeClass('uvod1 uvod2');
    //.css('background-image', 'url(img/uvod3.jpg)');
  });
});

.uvod-body {
  /* background-image: url("/img/uvod1.jpg"); */
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

.uvod1 {
  /* background-image: url("/img/uvod1.jpg"); */
  background-color: red;
}

.uvod2 {
  /* background-image: url("/img/uvod2.jpg"); */
  background-color: green;
}

.uvod3 {
  /* background-image: url("/img/uvod3.jpg"); */
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <main class="uvod-body uvod1">
      <div class="uvod-back">
          <h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
          <h1><a href="#" class="promouvod">Promo videa</a></h1>
          <h1><a href="#" class="afteruvod">After movie</a></h1>
      </div>
   </main>
</body>

【讨论】：

【解决方案2】：

您可以直接更改背景，但大部分样式应使用 CSS 完成 - 因此我们可以改为触发一个类（或设置一个“CSS 检测”的属性）。在这里，我使用颜色进行演示，还使用您的背景，然后根据您悬停的位置切换类 - 祖父母有您所说的过渡，这很有效。

我为您在 CSS 中看到的 :hover 添加了一组 -two 类，只是为了表明这一点——但那是元素而不是它的祖父元素。（那里没有过渡，但您可以像祖父母一样将其添加到 CSS 中 - 但这不是您的问题。

请注意，有一个 CSS :has() 来解决“父级”问题，但在撰写本文时尚未得到广泛支持。

$(function() {
  let svatba = $(".svatbauvod");
  let promo = $(".promouvod");
  let after = $(".afteruvod");
  let pozadi = $(".uvod-body");

  svatba.on('mouseenter', function() {
    pozadi.addClass('svatbauvod-in')
      .removeClass('promouvod-in afteruvod-in');
  });

  promo.on('mouseenter', function() {
    pozadi.addClass('promouvod-in')
      .removeClass('svatbauvod-in afteruvod-in');
  });

  after.on('mouseenter', function() {
    pozadi.addClass('afteruvod-in')
      .removeClass('svatbauvod-in promouvod-in');
  });
});

.uvod-body,
.uvod-body-two {
  background-image: url("/img/uvod1.jpg");
  background-size: cover;
  height: 100vh;
  width: auto;
  outline: 3px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.5s;
}

.uvod-body.svatbauvod-in,
.svatbauvod-two:hover {
  background-image: url("/img/uvod1.jpg");
  background-color: #ddffff;
}

.uvod-body.promouvod-in,
.promouvod-two:hover {
  background-image: url("/img/uvod2.jpg");
  background-color: #ffddff;
}

.uvod-body.afteruvod-in,
.afteruvod-two:hover {
  background-image: url("/img/uvod3.jpg");
  background-color: #ffffdd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <main class="uvod-body">
    <div class="uvod-back">
      <h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
      <h1><a href="#" class="promouvod">Promo videa</a></h1>
      <h1><a href="#" class="afteruvod">After movie</a></h1>
    </div>
  </main>
  <main class="uvod-body-two">
    <div class="uvod-back-two">
      <h1><a href="#" class="svatbauvod-two">Svatební videa</a></h1>
      <h1><a href="#" class="promouvod-two">Promo videa</a></h1>
      <h1><a href="#" class="afteruvod-two">After movie</a></h1>
    </div>
  </main>
</body>

【讨论】：