2
respostas

Alguém pode me ajudar com esse código por favor? Eu quero trocar ou mudar a cor da imagem do cabeçalho toda vez que passar o mouse por cima dela

_____________________________________HTML___________________________________________
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <!--CABEÇALHO-->
            <div class="cabecalho">
                <h1><img src="logo.png"></h1>
                <nav>
                    <ul>
                        <!--<li><a href="produtos.html">Home</a></li>-->
                        <li><a href="file:///C:/Users/Ewerton%20Lucas/Desktop/Curso%20Oracle/4%20-%20HTML5%20e%20CSS3%20(2)/produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>

______________________________________CSS____________________________________________
header {
    background: #BBBBBB;
    padding: 20px 0;
}
    .cabecalho {
        position: relative;
        width: 940px;
        margin: 0 auto;
    }

    .cabecalho img{
        background: url("logo.png");
    }

    .cabecalho img:hover{
        background: url("logo-branco.png") no-repeat;
    }

    nav {
        position: absolute;
        top: 110px;
        right: 0;
    }
        nav li {
            display: inline;
            margin: 0 0 0 15px;
        }
            nav a {
                text-transform: uppercase;
                color: #000000;
                font-weight: bold;
                font-size: 22px;
                text-decoration: none;
            }
            nav a:hover {
                color: #C78C19;
                text-decoration: underline;
            }
2 respostas

Olá, Ewerton Lucas Ramos do Espirito Santo. Eu copiei o código e no meu navegar ficou negrito, tente ainda dessa forma:

<body>
    <header>
        <h1 class="titulo-principal">Barbearia Alura</h1>
    </header>
    <img id="banner" src="banner.jpg">
    <div class="principal">
        <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
    </div>
    <div class="beneficios">
        <h3 class="titulo-centralizado">Benefícios</h3>

        <ul>
            <li class="itens">Atendimento aos Clientes</li>
            <li class="itens">Espaço diferenciado</li>
            <li class="itens">Localizações</li>
            <li class="itens">Profissionais Qualificados</li>
        </ul>
        <img src="beneficios.jpg" class="imagembeneficios">
    </div>
</body>

header{ background: #BBBBBB; padding: 20px 0; } .caixa{ position: relative; width: 940px; margin: 0 auto; } nav{ position: absolute; top: 110px; right: 0px; } nav li{ display: inline; margin: 0 0 0 15px; } nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; } nav a:hover{ color: #C78C19; text-decoration: underline; } .produtos{ width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; /background: #CCCCCC;/ margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; /Usado para garantir a largura e o espaçamento/ border: 2px solid #000000; border-radius: 10px; /borda arredondada/ } .produtos li:hover{ border-color: #C78C19; /Quando o mouse estiver por cima do item/ } .produtos li:active{ border-color: #088C19; /Quando o Mouse for pressionado/ } .produtos li:hover h2{ font-size: 34px; /Alterar o h2 quando o Mouse passar por cima do item/ } .produtos h2{ font-size: 30px; font-weight: bold; } .produto-descricao{ font-size: 18px; } .produto-preco{ font-size: 22px; font-weight: bold; margin-top: 10px; } footer{ text-align: center; background: url("bg.jpg"); padding: 40px; } .copyright{ color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }