Que tal, buenos dias.
Estoy intentando desaparecer con display: none un svg al hacer hover en una imagen
este es el código que extrañamente hasta hace unos dias me funcionaba y ahora no se que modifique que no funciona
<style>
.tablita { background-color: white; margin: auto; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select:none; }
.className {
background-color: white;
background-image:url("<?php if(isset($Mapa)) { echo ''; } ?>");
border:1px solid #195474; display:block; height:998px; position:relative; width:998px; margin: auto; margin-top: 50px;
}
.Imagen { z-index: 100; opacity: 0.9; }
svg { position: absolute; z-index: 5; display: block; height:998px; width:998px; margin: auto; margin-top: 53px; }
line { stroke-dasharray: 5.5; stroke: #1CCA00; stroke-width:3; }
circle { fill: #1CCA00; }
</style>
<table class="tablita" align="center">
<tr>
<td>
<div class="className">
<svg id="ocultar">
<circle cx="<?php if(isset($PosicionTiraX)) { echo $PosicionTiraX; } ?>" cy="<?php if(isset($PosicionTiraY)) { echo ($PosicionTiraY-54); } ?>" r="4" />
<line x1="<?php if(isset($PosicionCaeX)) { echo $PosicionCaeX; } ?>" y1="<?php if(isset($PosicionCaeY)) { echo ($PosicionCaeY-44); } ?>" x2="<?php if(isset($PosicionTiraX)) { echo $PosicionTiraX; } ?>" y2="<?php if(isset($PosicionTiraY)) { echo ($PosicionTiraY-54); } ?>" />
</svg>
<div style="position:absolute; left:<?php if(isset($PosicionCaeX) && $PosicionCaeX > 0) { echo ($PosicionCaeX-20).'px'; } ?>; top:<?php if(isset($PosicionCaeY) && $PosicionCaeY > 0) { echo ($PosicionCaeY-25).'px'; } ?>;z-index:20">
<a href="" target="_blank">
<img style="transform: rotate(<?php if(isset($PosicionROT)) { echo $PosicionROT.'deg'; } ?>); width: <?php if(isset($PosicionPx) && $PosicionPx > 0) { echo $PosicionPx.'px'; } else { echo "70px"; } ?>;" class="Imagen" onmouseover="hover('pusiste')" onmouseout="hover('saco')" src=""/>
</a>
</div>
</div>
</td>
</tr>
</table>
<script>
function hover(valor) {
if(valor == 'pusiste') {
document.getElementById("ocultar").style.display = "none";
}
else if(valor == 'saco') {
document.getElementById("ocultar").style.display = "block";
}
}
</script>
con onmouseover le doy valor a hover y con onmouseout le doy otro valor, lo extraño es que en el script le pongo un alert('prueba hover') y si me funcionar el hover, pero si intento ocultar el svg #ocultar no funciona