1

Quiero que cuando se haga hover a .borrarTema, el mismo div cambie de opacidad a 1 (anteriormente 0.6) y que también haga modificar el box-shadow del div .comentario a 0px 3px red (anteriormente 0px 3px #4AA184).

Mi php es el siguiente:

<div class='contComentarios'>
    <div class='creadorFecha'>
        <div> Creado por: <strong>". $registro2['Nombre'] ."</strong></div>
                                        <div>". $registro['Fecha'] ."</div>
    </div>

    <div class='comentario'>". $registro['Comentario'] ."</div>

    <div class='borrarTema'>
        <div id=". $registro['IdComentario'] ." class='borraCmnt' value='Borrar comentario'>Borrar tema</div>
    </div>

</div>

Los estilos son los siguientes:

.contComentarios .comentario{
    padding: 10px;
    background-color: #F9F9F9;
    box-shadow: 0px 3px #4AA184;
    margin-bottom: 0px;
    height: 60px;
}

.borrarTema{
    background-color: #4AA184;
    width: 100px;
    text-align: center;
    margin: -17px auto;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    opacity: 0.6;
    transition: 0.2s all;
}
1
  • 1
    sería recomendable que si tu cuestión ha sido resuelta que cierres la pregunta valorando una de las respuestas como correcta con el check.
    – ntzz
    Commented el 25 oct. 2018 a las 14:54

2 respuestas 2

3

La respuesta corta es no, no se puede modificar un elemento al gusto haciendo el hover en otro. Sólo se puede si el elemento es adyacente (operador +), un hijo del elemento sobre el que haces hover (operador >) o si ambos están bajo el mismo padre y uno precede al otro (operador ~). Aquí tienes mucha más información.

Una opción que tienes (si no quieres utilizar JS) es reordenar los elementos y que tu div de borrar tema esté encima del comentario. Te dejo un ejemplo. De todas formas, lo más lógico sería utilizar JS.

.contComentarios .comentario{
    padding: 10px;
    background-color: #F9F9F9;
    box-shadow: 0px 3px #4AA184;
    margin-bottom: 0px;
    height: 60px;
}

.borrarTema{
    background-color: #4AA184;
    width: 100px;
    text-align: center;
    margin: -17px auto;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    opacity: 0.6;
    transition: 0.2s all;
}

.borrarTema:hover{
   opacity: 1;
}

.borrarTema:hover ~ .comentario{
   box-shadow: 0px 3px red;
}
<div class='contComentarios'>
<br/>
 <div class='borrarTema'>
        <div id="idborrar" class='borraCmnt' value='Borrar comentario'>Borrar tema</div>
    </div>
    
    <div class='creadorFecha'>
        <div> Creado por: <strong>Autor</strong></div>
                                        <div></div>
    </div>

    <div class='comentario'>Este es un comentario</div>

</div>

1
  • Gracias, utilizaré entonces JS. Commented el 25 oct. 2018 a las 11:25
1

Yo utilizaria jQuery para hacer estos cambios.

Con el comando hover le añades la funcionalidad que buscas, y con el selector css vas cambiandoles las propiedades a los elementos que elijas.

$( document ).ready(function() {
    $('.borrarTema).hover(function(){ 
            $(this).css('opacity',1);
            $('.comentario).css('box-shadow','0px 3px red' );
    });
});

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.