CODEWITHSUNDEEP
htmlcsshover
aleduque
aleduque

Reputation: 27

Mouse hover only in the edges of a image?

hi im want to make that the hover effect in css triggers only when the mouse its over the image and not starts when it over a div container of this image...

how can i do??

<div class="contenedor">
  <img class="encendido" src="foco_encendido.svg">
  <img class="apagado" src="foco_apagado.svg">
</div>

.apagado
{
  background: #333333;
  width: 350px;
  position: absolute;
  margin: 0 0 0 5px;
  bottom: 0px;
}
.contenedor
{
  width: 360px;
  height: 85%;
  position: absolute;
  left: 200px;
  bottom: 0px;
}
.contenedor:hover img.apagado
{
  visibility: hidden;
}
.encendido
{
  width: 350px;
  position: absolute;
  margin: 0 0 0 5px;
  bottom: 0px;  
}

Upvotes: 0

Views: 172

Answers (1)

Derek
Derek

Reputation: 3016

change 

.contenedor:hover img.apagado
{
  visibility: hidden;
}

to 

.apagado:hover
{
  visibility: hidden;
}

Upvotes: 3

Related Questions