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

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

css

CSS代码使Gif在悬停区域外播放,css,hover,gif,area,rollover,Css,Hover,Gif,Area,Rollover,我正在为万圣节创建一个简单的网页。我有一个背景JPG，是一个中心有月亮的繁星夜空。背景500px乘以500px。在图像上，月球的面积大约是100px乘以100px的中心。我有一张gif照片，上面是一个女巫在整个夜空中飞翔，在月亮前面盘旋。很好我只希望悬停区域（鼠标入/鼠标出）是月亮区域本身，而不是整个夜空。如果您仅在月球上方悬停，但仍在夜空背景的整个宽度上飞行，则会触发witch gif。每当我将悬停区域仅包含在月球上时，gif仅在月球区域可见，而不是整个夜空。你能有一个500px×500p

我正在为万圣节创建一个简单的网页。我有一个背景JPG，是一个中心有月亮的繁星夜空。背景500px乘以500px。在图像上，月球的面积大约是100px乘以100px的中心。我有一张gif照片，上面是一个女巫在整个夜空中飞翔，在月亮前面盘旋。很好

我只希望悬停区域（鼠标入/鼠标出）是月亮区域本身，而不是整个夜空。如果您仅在月球上方悬停，但仍在夜空背景的整个宽度上飞行，则会触发witch gif。每当我将悬停区域仅包含在月球上时，gif仅在月球区域可见，而不是整个夜空。你能有一个500px×500px的gif区域，但触发它的悬停区域只有100px×100px中心吗？我搜索了这个网站，没有找到我要找的东西。感谢您的帮助。谢谢

下面是简单的HTML代码：

.backgrounds{
高度：500px；
宽度：500px；
背景图片：url（'background_moon.jpg'）；
}
.背景：悬停{
光标：指针；
背景：url（'flying_witch.gif'）、url（'background_moon.jpg'）；
}

您可以在

.backgrounds

元素中为月球区域创建一个div，为女巫创建另一个div。witch元素必须位于月球区域元素之后：

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

2）自动边距：在父级上使用

位置：相对的，在上使用位置：绝对的。月亮区域
带有一些定位（左、右、上、下）和边距：自动
属性：
.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
元素，并将位置：relative
设置为.backgrounds
元素。
您可以为月球区域创建一个div，为.backgrounds
元素内的女巫创建另一个div。witch元素必须位于月球区域元素之后：
<div class="backgrounds">
    <div class="moon-area"></div>
    <div class="witch"></div>
</div>

2）自动边距：在父级上使用位置：相对的，在上使用位置：绝对的。月亮区域
带有一些定位（左、右、上、下）和边距：自动
属性：
.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
元素，并将位置：relative
设置为.backgrounds
元素。
我感谢您的快速响应。我试了你给的两种密码。不幸的是，它给了我同样的问题，我曾经尝试过类似的事情。巫婆的gif动画仅出现在100px×100px悬停区域的边界内，而不是整个500px×500px背景。gif大小显示似乎不能大于悬停大小。它被剪切到悬停区域，你只能瞥见在悬停框内飞行的女巫。也许我错过了一步？再次感谢你的帮助……啊，我明白了。这很容易解决。我编辑了答案。请测试一下。我很抱歉我注意力不集中。现在我看到你在你的问题中对此发表了评论。实际上，它在标题上。我觉得自己很傻。这似乎奏效了！谢谢我继续添加了临时边界线，以查看我的悬停相对于月球的位置。我的月亮不太居中。由于艺术原因，我也可能会移动月亮，所以我在“.moon area”下添加了左上角。它没有移动悬停区域。我注意到中心上的对齐项目和对齐内容被删除了，但这没有帮助。我怎样才能把悬停位置移动一点呢？很好。因此，您可以删除底部和右侧的边距：auto
。然后，仅使用顶部和左侧以及百分比单位来定位它。例如：top:40%
和left:45%
直到你想要的位置。或者你也可以使用像素，因为你有固定的尺寸。透明的背景和动画，只有GIF可以使用。但我推荐的另一种方法是使用PNG，因为它也可以有一个透明的背景。然后使用动画
设置动画。悬停时，会出现动画。在动画关键帧中使用变换
，您知道。组合翻译
，旋转
，等等。搜索它，我认为它是值得的。我感谢快速的反应。我试了你给的两种密码。不幸的是，它给了我同样的问题，我曾经尝试过类似的事情。巫婆的gif动画仅出现在100px×100px悬停区域的边界内，而不是整个500px×500px背景。gif大小显示似乎不能大于悬停大小。它被剪切到悬停区域，你只能瞥见在悬停框内飞行的女巫。也许我错过了一步？再次感谢你的帮助……啊，我明白了。这很容易解决。我编辑了答案。请测试一下。我很抱歉我注意力不集中。现在我看到你在你的问题中对此发表了评论。实际上，它在标题上。我觉得自己很傻。这似乎奏效了！谢谢我继续添加了临时边界线，以查看我的悬停相对于月球的位置。我的月亮不太居中。由于艺术原因，我也可能会移动月亮，所以我在“.moon area”下添加了左上角。它没有移动悬停区域。我注意到中心上的对齐项目和对齐内容被删除了，但这没有帮助。我怎样才能把悬停位置移动一点呢？很好。因此，您可以删除底部和右侧的边距：auto
。那你是波西吗