鼠标只悬停在图像的边缘？

Question

嗨，我想让 css 中的悬停效果仅在鼠标悬停在图像上时触发，而不是在鼠标悬停在该图像的 div 容器上时触发...

我该怎么办？？

<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;  
}

Answer 1

改变

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

到

.apagado:hover
{
  visibility: hidden;
}

鼠标只悬停在图像的边缘？

Mouse hover only in the edges of a image?

html

css

hover