CODEWITHSUNDEEP
htmlcssflexboxhover
Michael Peters
Michael Peters

Reputation: 39

Activate hover only over content, not over empty space in the box

I'm trying to make a navigation with flexbox. Everything is fine until I hover over the space between my logo and my nav links. When I do this it turns my logo to the set hover state color. Which is what I want, but I don't want the space in between to affect the color of my logo (when I hover). This happens because I put a flex grow on my logo, to push my nav links to the right. How would I get around this? I'm not too familiar with other methods of doing so like using floats and display: block. Any suggestions would help.

/*NAVIGATION-TOP SECTION*/

#nav {
  display: flex;
  position: fixed;
  opacity: .5;
  z-index: 2;
  background: lightgrey;
  padding: 20px 0 20px 0;
  align-items: baseline;
  width: 100%;
  transition: .3s;
}

#logo {
  flex-grow: 1;
  z-index: 2;
  padding: 0 0 0 50px;
  font-size: 30px;
}

#logo:hover {
  color: #00b0ff
}

.nav-links {
  display: flex;
  float: right;
  padding: 0 25px 0 0;
}

.nav-links>a {
  text-decoration: none;
  color: black;
}

.nav-links>a:hover {
  color: #00b0ff;
}

.nav-links>a>li {
  list-style: none;
  padding: 0 15px 0 15px;
}
<header>
  <div id="nav">
    <div id="logo">TECHNOLOGY CENTRAL</div>
    <div class="nav-links">
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
    </div>
  </div>
</header>

Upvotes: 1

Views: 1121

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371799

You've applied flex-grow: 1 to the logo item. This makes it consume all free space on the line.

You've also applied a hover rule to the logo item. This makes the entire item hoverable (including all flex-grow space).

If you want the hover to activate only when over the content, and not the entire box, then don't use flex-grow.

There's a clean, simple and easy solution. Use flex auto margins instead.

#logo {
  /* flex-grow: 1; REMOVE */
  z-index: 2;
  padding: 0 0 0 50px;
  font-size: 30px;
  margin-right: auto; /* NEW */
}


#nav {
  display: flex;
  position: fixed;
  opacity: .5;
  z-index: 2;
  background: lightgrey;
  padding: 20px 0 20px 0;
  align-items: baseline;
  width: 100%;
  transition: .3s;
}

#logo {
  /* flex-grow: 1; REMOVE */
  z-index: 2;
  padding: 0 0 0 50px;
  font-size: 30px;
  margin-right: auto; /* NEW */
  cursor: pointer; /* optional */
}

#logo:hover {
  color: #00b0ff
}

.nav-links {
  display: flex;
  padding: 0 25px 0 0;
  /* margin-left: auto; */ /* instead of margin-right: auto; no difference */
}

.nav-links>a {
  text-decoration: none;
  color: black;
}

.nav-links>a:hover {
  color: #00b0ff;
}

.nav-links>a>li {
  list-style: none;
  padding: 0 15px 0 15px;
}
<header>
  <div id="nav">
    <div id="logo">TECHNOLOGY CENTRAL</div>
    <div class="nav-links">
      <a href="#">
        <li>Home</li> <!-- SEPARATE ISSUE: INVALID HTML: CHECK UL / LI STRUCTURE -->
      </a>
      <a href="#">
        <li>About</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
    </div>
  </div>
</header>

Learn more about flex alignment along the main axis here:

Learn more about flex alignment along the cross axis here:

Upvotes: 0

xpy
xpy

Reputation: 5631

Wrapping your logo with a span and applying the :hover to that span may be your desired effect.

/*NAVIGATION-TOP SECTION*/

#nav {
  display: flex;
  position: fixed;
  opacity: .5;
  z-index: 2;
  background: lightgrey;
  padding: 20px 0 20px 0;
  align-items: baseline;
  width: 100%;
  transition: .3s;
}

#logo {
  flex-grow: 1;
  z-index: 2;
  padding: 0 0 0 50px;
  font-size: 30px;
}

#logo span:hover {
  color: #00b0ff
}

.nav-links {
  display: flex;
  float: right;
  padding: 0 25px 0 0;
}

.nav-links>a {
  text-decoration: none;
  color: black;
}

.nav-links>a:hover {
  color: #00b0ff;
}

.nav-links>a>li {
  list-style: none;
  padding: 0 15px 0 15px;
}
<header>
  <div id="nav">
    <div id="logo"><div><span>TECHNOLOGY CENTRAL</span></div></div>
    <div class="nav-links">
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
    </div>
  </div>
</header>

Upvotes: 2

Gerard
Gerard

Reputation: 15796

I have removed flex-grow for the logo and added justify-content to the flexbox. All changes in the CSS are documented in the code.

Hope this helps.

/*NAVIGATION-TOP SECTION*/

#nav {
  display: flex;
  position: fixed;
  opacity: .5;
  z-index: 2;
  background: lightgrey;
  padding: 20px 0 20px 0;
  align-items: baseline;
  justify-content: space-between; /* added */
  width: 100%;
  transition: .3s;
}

#logo {
  /* flex-grow: 1; removed */
  /* z-index: 2; removed */
  padding: 0 0 0 50px;
  font-size: 30px;
}

#logo:hover {
  color: #00b0ff
}

.nav-links {
  display: flex;
  /* float: right; removed */
  padding: 0 25px 0 0;
}

.nav-links>a {
  text-decoration: none;
  color: black;
}

.nav-links>a:hover {
  color: #00b0ff;
}

.nav-links>a>li {
  list-style: none;
  padding: 0 15px 0 15px;
}
<header>
  <div id="nav">
    <div id="logo">TECHNOLOGY CENTRAL</div>
    <div class="nav-links">
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
    </div>
  </div>
</header>

Upvotes: 0

Related Questions