Entrar Ainda não tem acesso?
5
respostas

Aplico :hover e some minha imagem

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pseudoclasses e atividade Destaque nos links

por Salatiel Aizza
| 108k xp | 82 posts

Olá pessoal.

Estou com uma dificuldade que ainda não consegui solucionar. Assim que eu aplico o hover no item navegacao-lateral, a imagem do João da Silva desaparece. Seguem meu código:

.navegacao-site a:hover{
    text-shadow: 2px 4px #C0C;
}

.navegacao-site a:focus;
<aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a  href="https://github.com/joaodasilva" class="github">Github
                    </a>
                </li>
                <li>
                    <a  href="https://twitter.com/joaodasilva" class="twitter">Twitter
                    </a>
                </li>
                <li>
                    <a  href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
5 respostas
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Salatiel você poderia postar todo o seu código CSS ainda não consegui ver o seu .navegação-lateral{} fico no aguardo.

por Salatiel Aizza
| 108k xp | 82 posts

Na verdade eu que coloquei o nome errado, o correto é navegacao-site

Segue o CSS completo:

/* 1rem = 16px */
html{
    font-size: 100%;
}

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 100%;
    line-height: 1.5;

}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

h2{
    clear: both;
}

.titulo-principal {
    font-size: 300%;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: 0.7rem solid black;
    text-transform: uppercase;
}

p {
    text-align: justify;
    margin:  1.25rem 0;
}

.navegacao-site {
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
}

.rodape-pagina {
    /*background-color: #000;*/
    color: #F2FFFC;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background-color: rgba(60, 29, 61, .5);

}

main a {
    color: #851944;
}

.navegacao-site a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

.container {
    width: 50rem;
    margin: auto;
    padding: 1.8rem 0;
    margin-bottom: 2rem;
}

.navegacao-site h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.subtitulo-texto {
    font-size: 2rem;
}


.icones-redes-sociais li {
    display: inline-block;
}

.icones-redes-sociais a {
    height: 2.5rem;
    width: 2.5rem;
    display: block;
    text-indent: -99999px;
}

.github{
    background-image: url(../img/github.png);
}

.twitter{
    background-image: url(../img/twitter.png);
}

.linkedin{
    background-image: url(../img/linkedin.png);
}

main{
    width: 85%;
}
main a:hover{
    background-color: red;
}
main a:focus;
footer a:hover;
footer a:focus{
    background:  color: red;
}
.minha-foto, .navegacao-site{
        box-sizing: border-box;    
        border-bottom: 0.7rem solid black;
        border-left: 0.7rem solid black;
}
.navegacao-site a:hover{
    text-shadow: 2px 4px #C0C;
}
.navegacao-site a:focus;
.minha-foto{
    position: absolute;
    top: 0;    
    right: 0;
}
blockquote{
    position: relative;
}
.navegacao-site, .rodape-pagina {
    padding: 1.25;
}
.navegacao-site{
    width: 20%;
    position: absolute;
    top: 19.37rem;
    right: 0;
}
footer{
    clear: both;
    position: fixed;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
}
por Salatiel Aizza
| 108k xp | 82 posts

Eu consegui consertar apenas retirando: .navegacao-site a:focus;

Porém eu não entendi, pois o focus apenas seleciona os itens do site e promove a alternancia apertando a tecla tab, pelo o que estudei. E isso influencia de que forma ao desaparecimento da imagem?

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Salatiel Aizza, desculpe a demora, seguinte toda vez que você aplica uma regra css ela deve ter essa estrutura:

regra{

}

Certo! Acontece que nessas linhas do seu código .css encontrei várias regras erradas soltas.Como em :

main a:focus;
footer a:hover;

e tmb

.navegacao-site a:focus;

Quando vc não comenta essa linha dessa forma:

/*main a:focus;
footer a:hover;*/

Você gera uma regra errada, quando desistir de uma regra apague ou comente usando um par de /* e */ e teste os resultados. Foi por isso que sua regra deu erro. Espero ter ajudado , bons estudos!

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Salatiel ainda resta alguma dúvida a respeito desse tópico ou já foi solucionada ?