Não entendo o que quer dizer com "semântica", o seu código é minimo e apresenta algo simples, a unica modificação que eu faria é que se .acaoBaixar
e .acaoView
tem o mesmo efeito CSS, então .file:hover .acaoBaixar
e .file:hover .acaoView
também devem ter, ou seja não tem porque criar duas regras assim:
.file:hover .acaoBaixar {
display: block;
}
.file:hover .acaoView {
display: block;
}
Faça apenas uma:
.file:hover .acaoBaixar, .file:hover .acaoView {
display: block;
}
Pois assim se precisar mudar algo você só mudará em um lugar.
Outra coisa se usar isso em um lugar:
.subClasse
E isso em outro:
.classe .subClasse
Você poderá ter problemas com a regra que "tiver preferencia", tente manter a mesma regra, a não ser que .subClasse
(no exemplo) seja usado fora de .classe
, então o final ficaria assim:
.file .acaoBaixar, .file .acaoView {
display: none;
//...Resto do CSS
}
.file:hover .acaoBaixar, .file:hover .acaoView {
display: block;
}
Procure também deixar todas regras na classe principal e não no hover quando usar apenas display: block;
no hover. Não faz muita diferença, é mais por uma questão de organização.