SVG按鈕會影響外部的div顯示

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

我的需求

的問題是，我希望香港專業教育學院創建改變外一個div風格的按鈕數字標籤。我找不到這樣做的方法。

所有我需要的是通過將鼠標懸停在。我-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>

有什麼想法嗎？

來源

2013-11-04 KostasS

你可以包括在這樣的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/

來源

2013-11-04 10:14:10 Ian

SVG按鈕會影響外部的div顯示

回答

相關問題