Ocultar svg al hacer hover en imágen

B

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

B

.

DormiloN

Prueba a hacerlo con clases. Normalmente vas a querer meter una transición cuando hagas aparecer / desaparecer un elemento. Y creo que sería más cómodo tirando de css y luego simplemente añadiendo / quitando la clase pertinente con JS.

B

Perdón por el post, si funcionaba pero tenia un problema con el cache

Usuarios habituales