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

Question

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

我只希望悬停区域(鼠标移入/鼠标移出)是月亮区域本身，而不是整个夜空。如果您只悬停在月亮上但仍然飞过夜空背景的整个宽度，则会触发女巫 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 元素上应用悬停效果。我们可以使用非常有用的 ~ 选择器来选择下一个兄弟。

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

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