1

Possuo um cabeçalho tradicional, que graças ao @hugocsl, que me ajudou nessa pergunta, ocorre uma transição de cores, quando um item do menu está em hover. Tudo funciona muito bem, o que quero agora é manter o mesmo efeito, além do hover, também com focus/active

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    padding: 0;
    margin: 0;
    position: relative;
}
header::after {
    content: "";
    position: absolute;
    background: gray;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.header-content {
    /* background: gray; */
    padding: 30px;
}

.nav {
    background: #333;
    height: 60px;
    /* position: relative; */
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    /* position: relative; */
    vertical-align: top;
}
/* cores no hover */
.nav ul li:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 1s;
}
.nav ul li#menu-item-1:hover::after {
    background: gray;
}
.nav ul li#menu-item-2:hover::after {
    background: green;
}
.nav ul li#menu-item-3:hover::after {
    background: blue;
}
.nav ul li#menu-item-4:hover::after {
    background: red;
}
.nav ul li#menu-item-5:hover::after {
    background: gold;
}
.nav ul li#menu-item-6:hover::after {
    background: lime;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}
<header>
    <div class="header-content">
        <h1 class="logo">Header Colorido on Hover</h1>
    </div>
    <nav class="nav">
        <ul>
            <li class="menu-item" id="menu-item-1"><a href="#">Header Cinza</a></li>
            <li class="menu-item" id="menu-item-2"><a href="#">Verde</a></li>
            <li class="menu-item" id="menu-item-3"><a href="#">Azul</a></li>
            <li class="menu-item" id="menu-item-4"><a href="#">Vermelho</a></li>
            <li class="menu-item" id="menu-item-5"><a href="#">Gold</a></li>
            <li class="menu-item" id="menu-item-6"><a href="#">Lime</a></li>
        </ul>
    </nav>
</header>

3
  • Usando hover só será possível com JavaScript (incluindo ou não libs como jQuery, Angular, etc). 28/05/2018 às 18:38
  • @GuilhermeNascimento com tanto que essa estrutura se mantenha, não vejo problema em usar javascript, pode ser puro ou jquery. 28/05/2018 às 18:56
  • Só estava comentando para ficar adiantando que CSS somente não vai conseguir isto, se fosse com o clique dava até para simular, mas hover não. 28/05/2018 às 18:57

1 Resposta 1

1

Primeiro é preciso esclarecer a diferença entre :focus e :active: o primeiro é quando o elemento ganha o foco, seja clicando nele ou usando a tecla TAB; o segundo é quando você clica e segura o botão, e ao soltá-lo, o elemento perde o :active.

Neste caso você não precisa muito do :active (exceto se quiser fazer algum outro efeito ao elemento no momento do click).

Realmente apenas com CSS não tem como porque não tem como um pseudo ::after ficar por cima do outro, já que todos possuem o mesmo z-index: -1, ou seja, sempre o último visível ficará por cima dos anteriores.

Neste caso consegui desenvolver um código em jQuery usando eventos e hover, click e focus. Também foi preciso alterar o CSS (veja as partes comentadas no mesmo), mais especificamente as classes que alteram a cor de fundo do elemento.

Veja:

var focado; // variável para guardar a classe do botão com foco
$(".menu-item a").on("focus click", function(e){
   if(e.type == "focus"){
      var id = $(this).parent().attr("id");
      $(".header-content").addClass(id);
      focado = id;
   }else{
      e.stopPropagation(); // excluo os botões do evento click
   }
});

$(".menu-item a").hover(
   function(){
      var id = $(this).parent().attr("id");
      if(focado != id){
         $(".header-content").addClass(id).removeClass(focado);
      }
   },
   function(){
      var id = $(this).parent().attr("id");
      if(focado){
         $(".header-content").removeClass(id).addClass(focado);
      }else{
         $(".header-content").removeClass(id);
      }
   }
);

// ao clicar na página, reseto tudo
$(document).click(function(){
   $(".header-content").attr("class", "header-content");
   var focado;
});
h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    padding: 0;
    margin: 0;
    position: relative;
}
header::after {
    content: "";
    position: absolute;
    background: gray;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.header-content {
    /* background: gray; */
    padding: 30px;
}

.nav {
    background: #333;
    height: 60px;
    /* position: relative; */
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    /* position: relative; */
    vertical-align: top;
}
/* cores no hover */
/*.nav ul li a:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 1s;
}*/

.header-content.menu-item-1{
    background: gray;
}
.header-content.menu-item-2{
    background: green;
}
.header-content.menu-item-3{
    background: blue;
}
.header-content.menu-item-4{
    background: red;
}
.header-content.menu-item-5{
    background: gold;
}
.header-content.menu-item-6{
    background: lime;
}

/*
.nav ul li#menu-item-1 a:hover::after{
    background: gray;
}

.nav ul li#menu-item-2 a:hover::after{
    background: green;
}

.nav ul li#menu-item-3 a:hover::after{
    background: blue;
}
.nav ul li#menu-item-4 a:hover::after{
    background: red;
}
.nav ul li#menu-item-5 a:hover::after{
    background: gold;
}
.nav ul li#menu-item-6 a:hover::after{
    background: lime;
}
*/
.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="header-content">
        <h1 class="logo">Header Colorido on Hover</h1>
    </div>
    <nav class="nav">
        <ul>
            <li class="menu-item" id="menu-item-1"><a href="#">Header Cinza</a></li>
            <li class="menu-item" id="menu-item-2"><a href="#">Verde</a></li>
            <li class="menu-item" id="menu-item-3"><a href="#">Azul</a></li>
            <li class="menu-item" id="menu-item-4"><a href="#">Vermelho</a></li>
            <li class="menu-item" id="menu-item-5"><a href="#">Gold</a></li>
            <li class="menu-item" id="menu-item-6"><a href="#">Lime</a></li>
        </ul>
    </nav>
</header>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .