Question

我正在尝试用我拥有的两个三角形创建一个非常简单的悬停效果。其中一个三角形从它下面开始，然后悬停，显示在另一个三角形上方。

问题不是真正的影响，而是区域框妨碍了。这意味着左三角形暂时具有高于另一个三角形的z-index，不必要地重叠，因为它的周长是正方形并且有很多浪费的空间。

所以悬停在三角形2上只适用于很多区域。我试图做一个图像映射并利用坐标图来做我需要的东西，但我无法弄清楚如何将它保持为三角形格式，同时使用它来做我需要做的事情。它只是去了一个广场。

有办法做到这一点吗？它基本上只是悬停在特定的形状上，但CSS / HTML似乎仅限于正方形。任何jQuery解决方案或..？

谢谢。

Answer 1

如果没有100％知道你在这里会发生什么，我将建议一个通用的方法来克服我在过去项目中遇到的类似问题。

最简单的方法是将所有图像放在同一个临时容器中，例如带有position: relative的div，用于为图像提供堆叠和定位上下文。最后，使用透明的1x1 GIF或PNG图像覆盖整个div，该图像作为标记中的最后一个子项放置，宽度/高度为100％，并将图像映射应用于该空白图像。创建三角形形状所需的区域类型是“多边形”区域。这允许您指定自由形式的点对点图像映射区域。然后，您可以将鼠标悬停/鼠标滑动JavaScript链接到此图像映射区域。

例如（CSS定位和地图坐标只是一个例子，当然你必须自己指定）：

HTML

<div class="imagePanel">
    <img src="http://www.mysite.com/images/triangle1.png" alt="" class="triangle1" />
    <img src="http://www.mysite.com/images/triangle2.png" alt="" class="triangle2" />
    <img src="http://www.mysite.com/images/blank.gif" alt="" class="imageMap" usemap="#mapOver"/>
    <map id="mapOver" name="mapOver">
        <area id="areaTriangle" shape="poly" coords="25,240,108,100,190,240" href="#" />
    </map>
</div>

CSS

div.imagePanel
{
    position: relative;
    width: 300px;
    height: 300px;
}

div.imagePanel > img
{
    position: absolute;
}

img.triangle1
{
    left: 25px;
    top: 100px;
}

img.triangle2
{
    left: 75px;
    top: 75px;
    display: none;
}

img.imageMap
{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

jQuery

$(function() {
    $("#areaTriangle").hover(function() {
        $("img.triangle2").show();
    }, function() {
        $("img.triangle2").hide();
    });
});

查看工作示例 at this fiddle 。

Answer 2

ImageMapster，我的jquery image map plugin可能会让您使用图片地图轻松完成此操作。目前还不完全清楚您要从描述中尝试做什么，但插件允许您使用第二个图像进行高光效果，还可以定义事件后要显示的悬停区域以外的区域。

This example可能类似于您要实现的目标（鼠标悬停在中间圆圈上）。您可以在鼠标悬停之前让矩形（==您的第二个三角形）不可见。

三角形图像地图和悬停效果

2 个答案: