javascript - svg rect doesnt respond with another div fixed with a high z-index -
i want have rectangles in svg tag show , change opacity on hover. had whole code working, after adding fixed div high z-index, svg no longer worked (the hover effect has worked briefly not consistently know elements still should be).
<style> .hover_group:hover { opacity:1; } #projectsvg { position: relative; width: 100%; vertical-align: middle; margin: 0; overflow: hidden; margin:10px; } #projectsvg svg { position: relative; float: left; top: 0; left: -199; } </style> <div class="row" style="background-image: url(../img/home/blue_bk.jpg);"> <div class="col-xs-1 col-sm-0"></div> <div class="col-xs-10 col-sm-5 col-lg-4"> <figure id="projectsvg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="500 -50 920 1180" preserveaspectratio="xminymin meet" > //set background image <image width="1920" height="1080" xlink:href="../img/home/pain_chart3.png"> </image> <!-- shoulder--> <g class="hover_group" opacity="0"> <a xlink:href="#"> <rect x="762" y="130.1" opacity="0.2" fill="#ffffff" width="204.6" height="107.8"></rect> </a> </g> <!-- hand--> <g class="hover_group" opacity="0"> <a xlink:href="#"> <rect x="762" y="300.1" opacity="0.2" fill="#ffffff" width="204.6" height="107.8"></rect> </a> </g> <!-- knee--> <g class="hover_group" opacity="0"> <a xlink:href="#"> <rect x="862" y="560.1" opacity="0.2" fill="#ffffff" width="180.6" height="80.8"></rect> </a> </g> <!-- elbow--> <g class="hover_group" opacity="0"> <a xlink:href="#"> <rect x="1132" y="190.1" opacity="0.2" fill="#ffffff" width="204.6" height="107.8"></rect> </a> </g> </svg> </figure> </div> <div class="col-xs-12 col-sm-7 col-lg-8"> <h1>hello</h1> </div> </div>
is there way fix bug, or have write code manually?
Comments
Post a Comment