Añadir estilo a un elemento al hacer hover al elemento padre

publicado por: Anonymous

Tengo un <div> dentro del cual hay un <p> con un texto. Como puedo hacer para que al pasar el cursor por encima del <div> se aplique un efecto de subrayado text-decoration: underline al <p> usando CSS

Este es mi código HTML:

<div id="addNewColumn"  style="width: 200px; height: 300px; border: 1px dashed green; border-radius: 5px; border-width: 2px; margin: 20px; cursor: pointer">    
    <p id="newColLink"   style="text-align: center;">   Underline on hover </p>
</div>

solución

Para aplicar lo que deseas haciendo el hover en un elemento PERO asignandole los estilos a otro elemento podrías hacer lo siguiente:

_x000D_

_x000D_

#addNewColumn:hover p{_x000D_
  text-decoration: underline_x000D_
}

_x000D_

<div id="addNewColumn"  style="width: 200px; height: 300px; border: 1px dashed green; border-radius: 5px; border-width: 2px; margin: 20px; cursor: pointer">    _x000D_
    <p id="newColLink"   style="text-align: center;">   Underline on hover </p>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Con el selector #addNewColumn:hover p estás diciendo que a todos los elementos <p> que estén dentro del div#addNewColumn se les aplique cierto estilo al momento de pasar el mouse por encima.

NOTA: los estilos inline (como los estás usando) son una mala práctica en el código, deberías tener una hoja de estilos externa y vincularla al HTML por medio de la etiqueta <link>

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *