Skip to main content
adicionou 721 caracteres ao conteúdo; tags editadas
Fonte Link

Estou fazendo um projeto queno qual o mesmo tem 8 div'sdivs. A A princípio, todas elas têm a cor branca, porém, quando o mouse é passado em cimaencima de cada uma, as cores se alteram.

  Eu gostaria de fazer com que, ao passar o mouse em cimaencima da última divdiv, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hoverhover em todas... É um projeto muito importante!! Agradeço desde já!!

Códigocódigo:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}
/*Cor padrão das divs*/

.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/

.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

/*Aqui eu tentei fazer com que a class União (um card/div específico) ao colocar hover, trocasse a cor de todas as divs como se elas estivessem com o mouse hover*/

.uniao:hover ~ .tolerancia{
    background-color: rgb(22,22,22);
    color: white;
}
.uniao:hover ~ .dizer{
    background-color: #3cc7f2;
}
.uniao:hover ~ .pertence{
    background-color: #aa0a17;
}
.uniao:hover ~ .envolv{
    background-color: orange;
}
.uniao:hover ~ .solidariedade{
    background-color: #ff5252;
}

Estou fazendo um projeto que tem 8 div's. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado em cima de cada uma, as cores se alteram.

  Eu gostaria de fazer com que, ao passar o mouse em cima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas

Código:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!

código:

/*Cor padrão das divs*/

.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/

.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

/*Aqui eu tentei fazer com que a class União (um card/div específico) ao colocar hover, trocasse a cor de todas as divs como se elas estivessem com o mouse hover*/

.uniao:hover ~ .tolerancia{
    background-color: rgb(22,22,22);
    color: white;
}
.uniao:hover ~ .dizer{
    background-color: #3cc7f2;
}
.uniao:hover ~ .pertence{
    background-color: #aa0a17;
}
.uniao:hover ~ .envolv{
    background-color: orange;
}
.uniao:hover ~ .solidariedade{
    background-color: #ff5252;
}
Ajustando o código
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Estou fazendo um projeto no qual o mesmoque tem 8 divsdiv's. A A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encimaem cima de cada uma, as cores se alteram. 

Eu gostaria de fazer com que, ao passar o mouse encimaem cima da última divdiv, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hoverhover em todas... É um projeto muito importante!! Agradeço desde já!!

códigoCódigo:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}
/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!

código:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

Estou fazendo um projeto que tem 8 div's. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado em cima de cada uma, as cores se alteram. 

Eu gostaria de fazer com que, ao passar o mouse em cima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas

Código:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!

código:

/Cor padrão das divs/ .cards{ background-color: #fff; height: 150px; margin: 10px 5px 5px; display: inline-table; transition: .3s; cursor: pointer; color:black; }

/Cor mudando de cada div com hover/ .coop:hover{ background-color: yellow; } .aceito:hover{ background-color: rgb(166, 255, 34); }

.tolerancia:hover{ background-color: rgb(22,22,22); color: white; } .dizer:hover{ background-color: #3cc7f2; } .pertence:hover{ background-color: #aa0a17; } .envolv:hover{ background-color: orange; } .solidariedade:hover{ background-color: #ff5252; }

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}

Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!

código:

/Cor padrão das divs/ .cards{ background-color: #fff; height: 150px; margin: 10px 5px 5px; display: inline-table; transition: .3s; cursor: pointer; color:black; }

/Cor mudando de cada div com hover/ .coop:hover{ background-color: yellow; } .aceito:hover{ background-color: rgb(166, 255, 34); }

.tolerancia:hover{ background-color: rgb(22,22,22); color: white; } .dizer:hover{ background-color: #3cc7f2; } .pertence:hover{ background-color: #aa0a17; } .envolv:hover{ background-color: orange; } .solidariedade:hover{ background-color: #ff5252; }

Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!

código:

/*Cor padrão das divs*/
.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;
}

/*Cor mudando de cada div com hover*/
.coop:hover{
    background-color: yellow;
}
.aceito:hover{
    background-color: rgb(166, 255, 34);
}

.tolerancia:hover{
    background-color: rgb(22,22,22);
    color: white;
}
.dizer:hover{
    background-color: #3cc7f2;
}
.pertence:hover{
    background-color: #aa0a17;
}
.envolv:hover{
    background-color: orange;
}
.solidariedade:hover{
    background-color: #ff5252;
}
Fonte Link
Carregando