1

Lo que necesito es que al hacer hover sobre mi "img" haga el efecto que ahora hace, pero solo lo he logrado que lo haga con hover sobre todo el div con la clase "FirstColumnBasic".

He intentado otros métodos pero éste es el que se acerca más a lo que necesito, si alguien pudiera apoyarme se lo agradecería bastante.

De antemano muchas gracias por su tiempo!

img {
  width:200px;
  height:20px;
  background-color:#000;
}

.st3{fill:#B3D9D9;}

.st4{fill:#D6EBEB;}

.FirstColumnBasic #ejecutivo-boton {
  transform: translateY(0px); 
}

.FirstColumnBasic:hover #ejecutivo-boton {
  transform: translateY(-197px);
}
<div class="FirstColumnBasic">

<img class="image">

<div id="svgwrapper" style="width:1400px;">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1275 456" style="enable-background:new 0 0 1275 456;" xml:space="preserve">

<g id="movimiento">
	<rect id="linea-ejecutivo" x="632.5" y="-0.2" class="st3" width="10" height="235.9"/>

	
	<g id="ejecutivo-boton">
		<path class="st2" d="M649.4,225.7c0,4.7-4.1,8.5-9.2,8.5h-5.4c-5.1,0-9.2-3.8-9.2-8.5l-2.8-15.7c0-4.7,5.1-8.5,11.4-8.5h6.6
			c6.3,0,11.4,3.8,11.4,8.5L649.4,225.7z"/>
		<path class="st4" d="M626.9,209.8l2.8,15.6v0.4c0,2.5,2.3,4.5,5.1,4.5h5.4c2.8,0,5.1-2,5.1-4.5v-0.4l2.8-15.6
			c-0.2-2-3.2-4.2-7.3-4.2h-6.6C630,205.6,627.1,207.8,626.9,209.8 M640.2,238.3h-5.4c-7.2,0-13-5.4-13.2-12.2l-2.9-15.7v-0.4
			c0-7.1,6.8-12.6,15.5-12.6h6.6c8.7,0,15.5,5.5,15.5,12.6v0.4l-2.9,15.7C653.2,232.9,647.3,238.3,640.2,238.3"/>
	</g>
</g>
</svg>


</div>
    </div>

1 respuesta 1

1

He borrado style="width:1400px;"de #svgwrapper porque quería ver lo que estoy haciendo. Puedes volver a ponerlo.

Si quieres que esto pase solo cuando pasas con el ratón por encima de la imagen puedes utilizar este css:

img:hover + #svgwrapper #ejecutivo-boton {
  transform: translateY(-197px);
}

Esto dice que cuando pasas con el ratón por encima de la imagen img:hover el #ejecutivo-boton situado dentro de #svgwrapper que a su turno es situado inmediatamente después de la imagen img:hover + #svgwrapper #ejecutivo-boton { sea trasladado en Y -197px

img {
  width: 200px;
  height: 20px;
  background-color: #000;
}

img:hover + #svgwrapper #ejecutivo-boton {
  transform: translateY(-197px);
}

.st3 {
  fill: #b3d9d9;
}

.st4 {
  fill: #d6ebeb;
}

.FirstColumnBasic #ejecutivo-boton {
  transform: translateY(0px);
}

svg {
  border: 1px solid;
}
<div class="FirstColumnBasic">

<img class="image">

<div id="svgwrapper">

<svg viewBox="0 0 1275 456">

<g id="movimiento">
	<rect id="linea-ejecutivo" x="632.5" y="-0.2" class="st3" width="10" height="235.9"/>

	
	<g id="ejecutivo-boton">
		<path class="st2" d="M649.4,225.7c0,4.7-4.1,8.5-9.2,8.5h-5.4c-5.1,0-9.2-3.8-9.2-8.5l-2.8-15.7c0-4.7,5.1-8.5,11.4-8.5h6.6
			c6.3,0,11.4,3.8,11.4,8.5L649.4,225.7z"/>
		<path class="st4" d="M626.9,209.8l2.8,15.6v0.4c0,2.5,2.3,4.5,5.1,4.5h5.4c2.8,0,5.1-2,5.1-4.5v-0.4l2.8-15.6
			c-0.2-2-3.2-4.2-7.3-4.2h-6.6C630,205.6,627.1,207.8,626.9,209.8 M640.2,238.3h-5.4c-7.2,0-13-5.4-13.2-12.2l-2.9-15.7v-0.4
			c0-7.1,6.8-12.6,15.5-12.6h6.6c8.7,0,15.5,5.5,15.5,12.6v0.4l-2.9,15.7C653.2,232.9,647.3,238.3,640.2,238.3"/>
	</g>
</g>
</svg>


</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.