Question

我想做的事情相当复杂。

基本的想法是我有一个包装div，比如20 x 20 px，一旦我将鼠标悬停在它上面就会被隐藏和淡入淡出，并在移除鼠标时淡出。我找到了这部分。

我的下一步是在包装器div中包含一个包含图像的div。更大（约300 x 400px）的图像div溢出包装div的边界，以便整个图像可见，并且作为包装div的子项，在悬停时也会淡入。

这让我想到了我的问题：

1。当我将鼠标悬停在该区域上时，图像会按照我想要的方式淡入，但右上角由包装边框限制，并且仅溢出到左下角。

2. 当我将鼠标悬停在图像覆盖的任何区域而不仅仅是包装区域时，图像将会出现。

问题1的预期结果：我想将图像div放在包装器中，使其向上和向左，向下和向右溢出。换句话说，当我将鼠标悬停在包装区域上时，我希望图像淡入完全遮盖包装区域，以便包装区域基本上位于图像区域的中心

问题2的理想结果：我只想在将鼠标悬停在20 x 20包装区域时激活淡入效果。当我将鼠标悬停在任何区域时，300 x 400图像会在可见时覆盖，我不希望发生任何事情。鼠标关闭如果我不得不离开图像区域或包装区域以开始淡出，对我来说无关紧要，但是如果可以将所有悬停激活/停用限制在20 x 20区域只是，那会很酷。

我可以很容易地使用旧的image1而不是image2;在悬停时，图像1淡出以显示图像2技巧，但这完全是因为我希望淡入淡出激活位置在自身褪色的区域内。

ISK

更新：

我已经找到了第1号问题。

所以现在我只需要弄清楚我的第二个问题，我将全力以赴。

要了解我目前的进展情况，请访问我的网站：http://silentnoizemusic.com

向下滚动到广告牌上显示“SALES@silentnoizemusic.com”的区域，并将鼠标悬停在广告牌左上角的黑色推特图标上。

正如提醒一样，我希望只有当我将鼠标悬停在推特图标区域上时才会进行淡入淡出操作，而不是当我将鼠标悬停在淡入淡出图像所覆盖的区域上时。图像放置在较小的div包装器中，设置为可见溢出。因此，如果您要将溢出设置为隐藏，您会看到有一个带黄色边框的方形区域，当您将鼠标悬停在推特图标上时会消失。当我将包装器设置回溢出：visible;时，我只希望该方形区域激活悬停功能，而不是那个看不见的溢出内容占据的方块周围的任何区域。

如果由于编码限制而存在非JavaScript解决方案会更好，但如果js是唯一选项，那么无论如何我都会试一试。

再次感谢，

ISK

Answer 1

发生此问题是因为您的图像是包装器div的子项，并且将鼠标悬停在它上面被视为悬停在包装器div上。如果你不是非常反对Javascript解决方案，这是我的建议：从较大的图片外面小包装div，即它不再是孩子。但是将包装器和此图像放在与以前相同的位置。然后，在较小div上的onmouseover事件上，像以前一样更改图像的可见性。在onmouseout事件中，再次隐藏更大的图像。为了更改元素的属性以响应对某些其他元素的操作，您需要Javascript和CSS不会。

这是HTML和JS。将整个内容放在HTML文件中：

<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>

<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>

在div容器中缩小可点击区域？

1 个答案: