3

me podrian ayudar acerca de las fuentes.

  • En la primera imagen que tiene el icono y margenes anaranjados, se muestra sin pasar o poner el mouse en el icono.
  • En la segunda imagen que tiene el icono blanco con un fondo anaranjado, eso muestra cuando esta activado (cuando paso o pongo el mouse sobre el icono).

Pregunta: ¿Cómo puedo hacer para que se active el icono de la foto 2 tal solo pasar el mouse por el cuadro sin necesidad de tocar exactamente el icono para que cambie de color?

Solo quiero que la fuente de icono se active (cambie de fuente como la foto 2) tan solo pasar el mouse por el cuadro que contiene el icono y el texto.

.button{
    margin: 10px 80px;
    display:block;
    text-decoration: none;
    color: #ffa500;
    border: 1px solid #333;
}
.fx-sb {
    margin-left: 144px;
}
.list{
    width: 0px;
    display: flex;
    margin: 90px 0px;
}
.button {
    display: flex;
    position:relative;
    line-height: 27px;
    
}
.icon:hover{
    background: #ffa500;
    color:white;
}
.list [class*="icon"]:before {
    position:relative;
    bottom: -13px;
    margin-left: 16px;
}
.icon {
    margin-right: 350px;
    margin-left: 20px;
    text-align: center;
    font-size: 30px;
    width: 60px;
    height: 60px;
    position:relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 3px solid #ffa500;
}
.description {
    position:absolute;
    text-align: left;
    margin-left: 120px;
    color: rgb(150, 148, 148);
}
.titulo {
    font-size: 22px;
    text-transform:uppercase;
    font-family: "Merri";
    color: rgb(66, 65, 62, .9);
    font-weight: 600;
}
.parraf{
    font-size: 18px;
    font-family: "Arimo";
}
 <div class="list">   
       <div class="fx-sb">    
         <tr class="servicios">
                 <div href="" class="button">
                     <div class="icon icon-hotel">
                         <img url="CSS/fontello.css">
                     </div>
                     <div class="description">
                         <h9 class="titulo">Alojamiento</h9>
                         <p class="parraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                     </div>
                 </div>
                      
         </tr> 
       </div>
      
     </div> 
introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

2

En el código de la pregunta, el CSS hace que cambie el estilo cuando se pasa el mouse por encima debido a .icon:hover.

Para que suceda lo mismo pero cuando se pase el mouse por encima del elemento de clase .button y que aplique a un descendiente de clase .icon, sería .button:hover .icon. Eso es lo que significa el espacio (un descendiente).

.button:hover .icon {
    background: #ffa500;
    color:white;
}

Código completo:

.button{
    margin: 10px 80px;
    display:block;
    text-decoration: none;
    color: #ffa500;
    border: 1px solid #333;
}
.fx-sb {
    margin-left: 144px;
}
.list{
    width: 0px;
    display: flex;
    margin: 90px 0px;
}
.button {
    display: flex;
    position:relative;
    line-height: 27px;
    
}
.button:hover .icon {        /* <--- Acá modificamos */
    background: #ffa500;
    color:white;
}
.list [class*="icon"]:before {
    position:relative;
    bottom: -13px;
    margin-left: 16px;
}
.icon {
    margin-right: 350px;
    margin-left: 20px;
    text-align: center;
    font-size: 30px;
    width: 60px;
    height: 60px;
    position:relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 3px solid #ffa500;
}
.description {
    position:absolute;
    text-align: left;
    margin-left: 120px;
    color: rgb(150, 148, 148);
}
.titulo {
    font-size: 22px;
    text-transform:uppercase;
    font-family: "Merri";
    color: rgb(66, 65, 62, .9);
    font-weight: 600;
}
.parraf{
    font-size: 18px;
    font-family: "Arimo";
}
 <div class="list">   
       <div class="fx-sb">    
         <tr class="servicios">
                 <div href="" class="button">
                     <div class="icon icon-hotel">
                         <img url="CSS/fontello.css">
                     </div>
                     <div class="description">
                         <h9 class="titulo">Alojamiento</h9>
                         <p class="parraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                     </div>
                 </div>
                      
         </tr> 
       </div>
      
     </div> 

1
  • 1
    muchas gracias mi estimado
    – Rody
    Commented el 12 nov. 2020 a las 13:53

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.