Expandir a área clicável de um link | HTML e CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Gabriela Costa Sertori

| 72.7k xp | 19 posts

Olá, estou começando a fazer o código do meu site a partir do menu de navegação e me deparei com uma dúvida. Gostaria que, ao passar o mouse sobre um link a cor de background fosse alterada. Consegui com sucesso fazer isso, o problema é que o background muda apenas na área do link e não em todo o padding que eu dei a ele. Queria saber como eu posso aumentar essa área clicável e transformar o padding junto.

    <header>
        <div class="navegador">
            <h1><a href="index.html">Gabriela Sertori</a></h1>
            <nav>
                <ul>
                    <li><a href="uxdesign.html">UX Design</a></li>
                    <li><a href="uidesign.html">UI Design</a></li>
                    <li><a href="digitalshananigans.html">Digital Shananigans</a></li>
                    <li><a href="naoesobredesign.html">Não é sobre Design</a></li>
                </ul>
            </nav>
        </div>
    </header>

h1 { display: inline-block; padding: 20px 50px 20px 50px; position: absolute; }

.navegador { background: #111111; width: 100%; height: 55px; box-shadow: 0px 4px 5px rgba(0, 0, 0, 20%), 0px 7px 10px rgba(0, 0, 0, 14%), 0px 2px 16px rgba(0, 0, 0, 12%); }

.navegador ul { text-align: right; }

.navegador li { display: inline-block; position: relative; padding: 20px; }

.navegador li:last-child { padding: 20px 50px 20px 20px; }

.navegador li:first-child { text-align: left; }

.navegador a { color: #FEFEFE; text-decoration: none; }

.navegador a:hover { background: #FEFEFE; color: #111111; transition: 500ms all; }

3 respostas

por GUILHERME F ALMEIDA

| 48.8k xp | 33 posts

Técnico em Informática

07/12/2020

Bom dia Gabriela, tudo certo?

Pelo o que eu entendi, você quer que o hover capture todo o elemento <li>, e não apenas o link. Para fazer isso eu fiz algumas alterações no seu CSS.

Para que o efeito do hover aconteça no bloco inteiro e não apenas no link, você precisa fazer na tag <li> ao invés da tag <a>. Então eu mudei o seu ".navegador a:hover" para "li:hover".

O problema é que somente fazendo isso, o hover não altera a cor do link, que permanece branco e acaba sumindo quando você passa o mouse por cima. Para resolver isso primeiro mudei a cor de ".navegador a" para "inherit", para que ela herde a propriedade do elemento pai <li>.

A seguir atribuí a cor padrão branco para os textos na tag <li>, para que seja herdada pela tag <a>.

Segue abaixo o seu código CSS comentado com as minhas alterações para você poder visualizar melhor:

h1 {
    display: inline-block;
    padding: 20px 50px 20px 50px;
    position: absolute;
}

.navegador {
    background: #111111;
    width: 100%;
    height: 55px;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 20%), 0px 7px 10px rgba(0, 0, 0, 14%), 0px 2px 16px rgba(0, 0, 0, 12%);
}

.navegador ul {
    text-align: right;
}

.navegador li {
    display: inline-block;
    position: relative;
    padding: 20px;

    /*adicionei cor branca nos elementos li*/
    color: rgb(255, 255, 255); 
}

.navegador li:last-child {
    padding: 20px 50px 20px 20px;
}

.navegador li:first-child {
    text-align: left;
}

.navegador a {
    /*a propriedade inherit faz com que a tag <a> herde a cor do elemento pai <li>*/
    color: inherit;
    text-decoration: none;
}

/*hover no elemento <li> inteiro*/
li:hover {
    background: #FEFEFE;
    transition: 500ms all;
    color: black;
}

por Gabriela Costa Sertori

| 72.7k xp | 19 posts

07/12/2020

Oi Guilherme! Deu super certo, obrigada :D, tbm alterei meu h1 pra seguir o mesmo padrão. Mas agora, se eu quiser que toda essa área seja clicável, eu preciso trocar a tag 'a' pela 'button'?

solução!

por GUILHERME F ALMEIDA

| 48.8k xp | 33 posts

Técnico em Informática

07/12/2020

Você pode fazer isso removendo os paddings nas tags ".navegador li" e ".navegador li:last-child".

Depois disso, você adiciona a tag "display: block;" em ".navegador a" e ajusta o padding neste mesmo lugar. Segue abaixo o código comentado com as alterações:

h1 {
    display: inline-block;
    padding: 20px 50px 20px 50px;
    position: absolute;
}

.navegador {
    background: #111111;
    width: 100%;
    height: 55px;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 20%), 0px 7px 10px rgba(0, 0, 0, 14%), 0px 2px 16px rgba(0, 0, 0, 12%);
}

.navegador ul {
    text-align: right;
}

.navegador li {
    display: inline-block;
    position: relative;
    /*removi o padding aqui*/
     color: rgb(255, 255, 255); 
}


.navegador li:first-child {
    text-align: left;
}

/*removi o .navegador li:last-child aqui*/

.navegador a {
       color: inherit;
       text-decoration: none;

    /*adicionei essas duas linhas*/
    display: block; 
    padding: 20px 20px 20px 20px;
}

li:hover {
    background: #FEFEFE;
    transition: 500ms all;
    color: black;
}