Quiero que una imágen se active al pasar el ratón por encima del botón que la activa, pero no he logrado cómo hacerlo... antes este codigo que he usado si me funcionaba pero ahora no funciona de ninguna manera, no sé que hacer.
.img-mouse{
background: #ff0000;
color: #fff;
padding: 15px;
border-radius: 5px;
}
.img-a-mostrar{
display: none;
}
/* Aquí está la magia que no me funciona*/
.img-mouse:hover + .img-a-mostrar {
display: block !important; /* activamos la imágen y hasta le ruego con un !important */
}
<a class='img-mouse'>pasa el ratón y mira la imagén</a>
<!-- ya he probado con <button> pero tampoco -->
<img class='img-a-mostrar' src='http://placehold.jp/150x150.png'/>
¿Qué estoy haciendo mal?