Focus/active event in a header

Asked

Viewed 49 times

1

I have a traditional header, which thanks to @hugocsl, who helped me in that question, a color transition occurs when a menu item is in hover. Everything works very well, what I want now is to maintain the same effect, beyond the hover, also with 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>

css

  • Using Hover will only be possible with Javascript (including or not libs like jQuery, Angular, etc).

  • @Guilhermenascimento with so much that this structure is maintained, I see no problem in using javascript, can be pure or jquery.

  • I was just commenting to be upfront that CSS will only not achieve this, if it was with the click I could even simulate, but not.

1 answer

1


First we need to clarify the difference between :focus and :active: the first is when the element gains focus, either by clicking on it or using the key TAB; the second is when you click and hold the button, and when you release it, the element loses the :active.

In this case you don’t need much of :active (except if you want to do some other effect to the element at the time of click).

Really only with CSS has no way because it has as a pseudo ::after be on top of each other, since all have the same z-index: -1, that is, always the last visible will be above the previous.

In this case I was able to develop a code in jQuery using events and hover, click and focus. It was also necessary to change the CSS (see the parts commented on it), more specifically the classes that change the background color of the element.

Behold:

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.