How to specify an address that is outside a set of 'div'

Question

How to specify an address that is outside a set of 'div'

Navigation

#1 by (2 votes)

1

I made a 'hover' menu but I want to change the color of the gray bar of the menu by pressing the cursor on the 'Search and News' buttons but I do not know how to specify the .navbar address (gray menu) by applying the 'hover' effect on it, even because it is like the main one above the other divs, is there any way to make the gray bar change color by leaning the cursor on the 'search' and 'News' items ?? >

body{background-color:#09C;}
.navbar{ overflow:hidden; 
background-color:#666; 
font-family:Arial, Helvetica, sans-serif;
}
.navbar a{float: left;
font-size: 16px;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none; 
}
.navbar a:hover, .menu:hover .bt{background-color: #0C0;
}

.menu{float: left;
overflow: hidden; 
}
.menu .bt{font-size: 16px; 
border: none;
outline: none;
color: #FFF;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin:0;
}
.menu:hover .sub{ display:block;
}
.sub{display: none;
position: absolute;
background-color:#f9f9f9;
min-width: 160px;
}
.sub a{float: none;
color: #000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

<div class="navbar">
<a href="#">Pesquisas</a>
<div class="menu">
<button class="bt">News</button>
  <div class="sub">
   <a href="#">Links</a>
   <a href="#">Links</a>
   <a href="#">Links</a>
  </div>
</div>
</div>

html css hover

asked by anonymous 15.07.2018 / 01:34

1 answer

How do I know if a button was clicked? Xamarin Forms How to use querySelectorAll () to search for specific tag derived from an element that has an x class?

score 2 · Accepted Answer

This was a way I found to fix this with CSS only

Dude using a combination of pseudo-elements ::after with the colors you need, instead of using background-color direct in the main html element you can.

Notice that I have not even touched your HTML, I did everything in the CSS in ::after and :hover::after

But I needed to tweak some styles of Navbar .... It was with overflow:hidden , and after I put the position:relativer I needed to get this overflow. To fix I put a value of height fixed.

    body{background-color:#09C;}
.navbar{ 
font-family:Arial, Helvetica, sans-serif;
position: relative;
height: 46px;
}
.navbar a{float: left;
font-size: 16px;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none; 
}
.navbar a:hover, .menu:hover .bt{background-color: #0C0;
}

/* estilos das cores*/
.navbar::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #666;
      top: 0;
      left: 0;
      z-index: -10;
    }
    .navbar a::after , .navbar .menu::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .navbar a:hover::after {
      background-color: #ff0000;
    }
    .navbar .menu:hover::after {
      background-color: #0000ff;
    }


.menu{float: left;
overflow: hidden; 
}
.menu .bt{font-size: 16px; 
border: none;
outline: none;
color: #FFF;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin:0;
}
.menu:hover .sub{ display:block;
}
.sub{display: none;
position: absolute;
background-color:#f9f9f9;
min-width: 160px;
}
.sub a{float: none;
color: #000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}

  <div class="navbar">
    <a href="#">Pesquisas</a>
    <div class="menu">
      <button class="bt">News</button>
      <div class="sub">
        <a href="#">Links</a>
        <a href="#">Links</a>
        <a href="#">Links</a>
      </div>
    </div>
  </div>