如何解决对角堆叠的圆形图像背景元素悬停？答案

【问题标题】：How to tackle diagonally stacked, rounded image background element hovers?如何解决对角堆叠的圆形图像背景元素悬停？
【发布时间】：2013-12-18 13:37:13
【问题描述】：

我在这里遇到了很大的挑战，我的语言差距也可能对你解密标题提供挑战，但是，嘿......

http://toms.somese.lv/test/ 或 http://jsfiddle.net/Wm32D/1/（由 gvee 创建）

红色阴影是包含圆形图像的元素的边框。悬停时您将能够看到它们。

<style>
body
{
    background-color: black;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

#application
{
    width: 1000px;
    height: 800px;

    margin: 0px auto;

    position: relative;
}

#ages
{
    width: 524px;
    height: 513px;

    position: absolute;

    left: 224px;
    top: 166px;
}

    #ages > a
    {
        display: block;

        position: absolute;

        box-shadow: 0px 0px 1px 0px red;
    }

    #ages a span
    {
        position: absolute;

        display: block;

        background-color: transparent;
        background-repeat: no-repeat;
        background-position: -9999px -9999px;

        width: 100%;
        height: 100%;

        left: 0;
        top: 0;
    }

    #ages > a:hover span, #ages > a.active span
    {
        background-position: center center;
    }

        #ages a.year20
        {
            width: 100%;
            height: 100%;

            left: 0;
            top: 0;
        }

        #ages a.year20 span
        {
            background-image: url('assets/images/wood-layers/20.png');
        }

        #ages a.year19
        {
            width: 498px;
            height: 489px;

            left: 14px;
            top: 10px;
        }

        #ages a.year19 span
        {
            background-image: url('assets/images/wood-layers/19.png');
        }

        #ages a.year18
        {
            width: 477px;
            height: 470px;

            left: 24px;
            top: 19px;
        }

        #ages a.year18 span
        {
            background-image: url('assets/images/wood-layers/18.png');
        }

        #ages a.year17
        {
            width: 455px;
            height: 449px;

            left: 37px;
            top: 27px;
        }

        #ages a.year17 span
        {
            background-image: url('assets/images/wood-layers/17.png');
        }

        #ages a.year16
        {
            width: 434px;
            height: 429px;

            left: 48px;
            top: 37px;
        }

        #ages a.year16 span
        {
            background-image: url('assets/images/wood-layers/16.png');
        }

        #ages a.year15
        {
            width: 413px;
            height: 412px;

            left: 59px;
            top: 44px;
        }

        #ages a.year15 span
        {
            background-image: url('assets/images/wood-layers/15.png');
        }

        #ages a.year14
        {
            width: 382px;
            height: 382px;

            left: 76px;
            top: 58px;
        }

        #ages a.year14 span
        {
            background-image: url('assets/images/wood-layers/14.png');
        }

        #ages a.year13
        {
            width: 346px;
            height: 344px;

            left: 95px;
            top: 77px;
        }

        #ages a.year13 span
        {
            background-image: url('assets/images/wood-layers/13.png');
        }

        #ages a.year12
        {
            width: 313px;
            height: 312px;

            left: 112px;
            top: 92px;
        }

        #ages a.year12 span
        {
            background-image: url('assets/images/wood-layers/12.png');
        }

        #ages a.year11
        {
            width: 282px;
            height: 282px;

            left: 128px;
            top: 104px;
        }

        #ages a.year11 span
        {
            background-image: url('assets/images/wood-layers/11.png');
        }

        #ages a.year10
        {
            width: 247px;
            height: 245px;

            left: 143px;
            top: 121px;
        }

        #ages a.year10 span
        {
            background-image: url('assets/images/wood-layers/10.png');
        }

        #ages a.year9
        {
            width: 209px;
            height: 209px;

            left: 162px;
            top: 136px;
        }

        #ages a.year9 span
        {
            background-image: url('assets/images/wood-layers/9.png');
        }

        #ages a.year8
        {
            width: 179px;
            height: 177px;

            left: 179px;
            top: 152px;
        }

        #ages a.year8 span
        {
            background-image: url('assets/images/wood-layers/8.png');
        }

        #ages a.year7
        {
            width: 150px;
            height: 148px;

            left: 194px;
            top: 163px;
        }

        #ages a.year7 span
        {
            background-image: url('assets/images/wood-layers/7.png');
        }

        #ages a.year6
        {
            width: 121px;
            height: 122px;

            left: 208px;
            top: 178px;
        }

        #ages a.year6 span
        {
            background-image: url('assets/images/wood-layers/6.png');
        }

        #ages a.year5
        {
            width: 96px;
            height: 94px;

            left: 220px;
            top: 190px;
        }

        #ages a.year5 span
        {
            background-image: url('assets/images/wood-layers/5.png');
        }

        #ages a.year4
        {
            width: 73px;
            height: 72px;

            left: 234px;
            top: 200px;
        }

        #ages a.year4 span
        {
            background-image: url('assets/images/wood-layers/4.png');
        }

        #ages a.year3
        {
            width: 50px;
            height: 51px;

            left: 245px;
            top: 210px;
        }

        #ages a.year3 span
        {
            background-image: url('assets/images/wood-layers/3.png');
        }

        #ages a.year2
        {
            width: 37px;
            height: 37px;

            left: 253px;
            top: 217px;
        }

        #ages a.year2 span
        {
            background-image: url('assets/images/wood-layers/2.png');
        }

        #ages a.year1
        {
            width: 19px;
            height: 19px;

            left: 262px;
            top: 226px;
        }

        #ages a.year1 span
        {
            background-image: url('assets/images/wood-layers/1.png');
        }
</style>

<div id="application">
    <section id="ages">
        <a class="year20" href="#"><span></span></a>
        <a class="year19" href="#"><span></span></a>
        <a class="year18" href="#"><span></span></a>
        <a class="year17" href="#"><span></span></a>
        <a class="year16" href="#"><span></span></a>
        <a class="year15" href="#"><span></span></a>
        <a class="year14" href="#"><span></span></a>
        <a class="year13" href="#"><span></span></a>
        <a class="year12" href="#"><span></span></a>
        <a class="year11" href="#"><span></span></a>
        <a class="year10" href="#"><span></span></a>
        <a class="year9" href="#"><span></span></a>
        <a class="year8" href="#"><span></span></a>
        <a class="year7" href="#"><span></span></a>
        <a class="year6" href="#"><span></span></a>
        <a class="year5" href="#"><span></span></a>
        <a class="year4" href="#"><span></span></a>
        <a class="year3" href="#"><span></span></a>
        <a class="year2" href="#"><span></span></a>
        <a class="year1" href="#"><span></span></a>
    </section>
</div>

在图片中：

红色指针显示区域，当前该框仍处于活动状态。
绿色指针显示区域，我想大概在哪里活动检测结束。

问题是，只有当鼠标在其“圆形”范围内时，我才需要激活每一层，而不是在边界框范围内。当鼠标移动仅基于 X 或 Y 时，它可以工作，但是，当移动 XY（对角线）时，边界框会影响正确的突出显示。

我知道我可以用多边形地图解决这个问题，这就是我开始着手的工作，但是，也许还有其他/更好的方法来解决这个问题？

不过有一个问题，我可以使用的工具是 HTML、CSS、JavaScript - 没有服务器端备份。结果必须向后兼容到 IE7。

也许你知道一个工具，它会返回我从外部透明度移除应用的多边形边界框点坐标？

我希望各位巫师有什么想法。

【问题讨论】：

您可以在这里发布演示您的情况的相关代码吗？外部链接不会在 Stack Overflow 上运行...
哦，看比看多。代码是一堆 CSS 和 HTML 行，仅此一项不会提供任何东西。
那我相信你应该发一张截图
"向后兼容到 IE7" -- :'-(
JSFiddle 对于那些想玩代码的人：jsfiddle.net/Wm32D/1

标签： javascript jquery html css

【解决方案1】：

您可以使用图像地图和空白图像叠加轻松获得可点击的圆圈。您可以将事件处理程序连接到 AREA 标记。向后兼容（和脑死）。

【讨论】：