在 div 容器中制作更小的可点击区域？

Question

我正在尝试做的事情相当复杂。

基本想法是我有一个包装 div，比如 20 x 20 像素，当我将鼠标悬停在它上面时它会隐藏并淡入，当鼠标移开时它会淡出。这部分我已经弄清楚了。

我的下一步是在包装器 div 中包含一个包含图像的 div。较大的图像 div（大约 300 x 400 像素）溢出了包装 div 的边界，因此整个图像都是可见的，并且作为包装 div 的子元素，在悬停时也会淡入。

这让我想到了我的问题：

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

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

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

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

我可以很容易地使用旧的 image1 而不是 image2；悬停时，图像 1 淡出以显示图像 2 技巧，但这一切都是地狱，因为我希望淡入淡出激活位置位于自身淡出的区域内。

问

---

更新：

我已经找到了第 1 期。

所以现在我只需要弄清楚我的第二个问题就可以了。

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

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

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

由于编码限制，如果有非javascript解决方案会更好，但如果js是唯一的选择，那么我还是会尝试一下。

再次感谢，

问

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>