CSS 使 Gif 在悬停区域外播放的代码

Question

我正在为万圣节创建一个简单的网页。我有一个繁星点点的夜空背景 JPG，中间有一个月亮。背景 500 像素 x 500 像素。月亮区域在图像中心大约为 100px x 100px。我有一个由制作的 gif，它在悬停时（在月亮前）飞过背景的整个夜空。工作正常。

我只希望悬停区域（鼠标 in/mouse 出来）是月亮区域本身，而不是整个夜空。 gif 如果你只悬停在月亮上但仍然飞过夜空背景的整个宽度，就会被触发。每当我只包含月亮的悬停区域时，gif 仅在月亮区域可见，而不是整个夜空。你可以有一个 500px x 500px 的 gif 区域，但触发它的悬停区域只有 100px x 100px 中心吗？我搜索了该网站，但没有找到我要找的东西。任何帮助表示赞赏。谢谢！

这是下面的简单工作 HTML 代码：

.backgrounds {
  height: 500px;
  width: 500px;
  background-image: url('Background_moon.jpg');
}

.backgrounds:hover {
  cursor: pointer;
  background: url('flying_witch.gif'), url('Background_moon.jpg');
}

<div class="backgrounds"></div>

Answer 1

您可以在 .backgrounds 元素内为月亮区域创建一个 div，并为创建另一个 div。元素必须在月球区域元素之后：

<div class="backgrounds">
    <div class="moon-area"></div>
    <div class="witch"></div>
</div>

首先，让我们集中 .moon-area 元素。
您可以通过两种不同的方式将其集中。

1) Flexbox: 在父级 display: flex、justify-content: center（水平）和 aling-items: center（垂直）上使用，如下所示：

.backgrounds {
  background-image: url('Background_moon.jpg');
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.moon-area {
  width: 100px;
  height: 100px;
  z-index: 1;
}

2) 自动边距： 在父级上使用 position: relative，在 .moon-area 上使用 position: absolute 并进行一些定位（左，右）、顶部、底部）和 margin: auto 属性：

.backgrounds {
  background-image: url('Background_moon.jpg');
  height: 500px;
  width: 500px;
  position: relative;
}

.moon-area {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

我们还有 .witch CSS:

.witch {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

因此，您可以在 .moon-area 元素上应用悬停效果。我们可以使用非常有用的 ~ select 或者 select 下一个兄弟

.moon-area:hover ~ .witch {
  cursor: pointer;
  background: url('flying_witch.gif'), url('Background_moon.jpg');
}

此外，不要忘记将 z-index: 1 设置为 .moon-area 元素，将 position: relative 设置为 .backgrounds 元素。

CSS 使 Gif 在悬停区域外播放的代码

CSS code to make Gif play outside of hover area

css

hover

gif

area

rollover