Question

我正在尝试实施

http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

满足我的需求

问题是我希望我创建的按钮能够改变图形标记之外的div的样式。我找不到办法做到这一点。

我需要的只是将鼠标悬停在.my-1按钮上，以显示.y1 div

到目前为止，这是代码。

<style type="text/css">

#burj-imagemap {
    overflow: hidden;
    padding-bottom: 75%;
    vertical-align: middle;
    width: 100%;
}

#burj-imagemap svg {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

.my-1:hover {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;
}

.my-1 {cursor: pointer;}

.y1 {
    display: none;
}
.my-1:hover .y1 {
    display: block;
    background-color: #F00;
    height: 250px;
    width: 250px;
    z-index:1000;
}

</style>

<figure id="burj-imagemap">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 808" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" height="808" width="1200">
</image>
<a class="my-1" >
<g>
    <defs>
        <polygon id="SVGID_1_" points="322,131 62,240 79,346 274,250 412,405 501,250"/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
    </clipPath>
    <g clip-path="url(#SVGID_2_)">
        <image overflow="visible" width="1200" height="808" xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg"  transform="matrix(1 0 0 1 -33.5 -301)">
        </image>
    </g>
</g></a>
</svg>
</figure>
<div class="y1">Hi!</div>

任何想法？

Answer 1

您可以在svg中包含一个事件处理程序，就像这样..

<g clip-path="url(#SVGID_2_)" onmouseover="document.getElementById('y1').style['display'] = 'inline';">
<div id="y1" class="y1">Hi!</div>

在这里摆弄http://jsfiddle.net/9mDur/

SVG按钮影响外部div显示

1 个答案: