Enable hovering only on the actual content within the box, not on the empty space

Currently, I am working on creating a navigation bar using flexbox. Everything seems to be functioning correctly except for one issue: when I hover over the space between my logo and the navigation links, it changes the color of my logo to the hover state color. While this is the desired effect for the logo itself, I do not want the empty space between them to trigger this color change. This behavior is a result of applying flex grow to my logo in order to align the navigation links to the right. Is there a way to work around this? I am not familiar with alternative methods such as using floats or setting display to block. Any suggestions or solutions would be greatly appreciated.

/*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>

htmlcssflexboxhover

Answer №1

To achieve the desired effect, consider wrapping your logo with a span and applying the :hover to that specific span.

/*STYLING FOR 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>

Answer №2

I have made some adjustments to the CSS for the logo by removing the flex-grow property and adding justify-content to the flexbox. These changes have been well documented in the code provided.

I hope this solution proves to be helpful in resolving the issue at hand.

Answer №3

By setting flex-grow: 1 on the logo item, you are allowing it to take up all available space on the line.

In addition to this, a hover rule has been applied to the logo item, making the entire item hoverable, including the space allocated by flex-grow.

If you only want the hover effect to activate when hovering over the content and not the entire box, then avoid using flex-grow.

An easy solution is to utilize 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>

Explore more about flex alignment on the main axis here:

  • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Check out information about flex alignment on the cross axis here:

  • How does flex-wrap work with align-self, align-items and align-content?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a Chrome App access a user's files on their hard drive with proper permissions?

I'm currently working on a Chrome Packaged App that includes video playback functionality. My main goal is to enable users to stream online media (such as MP4 videos) while also giving them the option to save the video to a location of their choice. ...

htmlgoogle-chromehtml5-videogoogle-chrome-app

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

javascriptcsshtmlshadows

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...

cssreactjsnavigation

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

javascriptjqueryhtmlcsstags

Chosen Dropdown selection - Retrieve/Receive information

One of the challenges I'm facing involves a dropdown list on my web form that contains various dates. My main query is: How can I retrieve data for the selected date from a MySQL database and present it to the user? Additionally, if the chosen date do ...

phpjavascriptmysqlhtml

Display content from an external HTML page within a div using Ionic

Currently, I am facing an issue where I am utilizing [innerHtml] to populate content from an external HTML page within my Ionic app. However, instead of loading the desired HTML page, only the URL is being displayed on the screen. I do not wish to resort t ...

javascripthtmlangularionic-framework

Prevent jQuery UI default styling from being applied

I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Toggle the visibility of multiple divs depending on a specific attribute value

I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me pr ...

javascriptjqueryhtmlcssangularjs

Print media not affected by Bootstrap styling

Below is the code I am using to display a table within my application: var elementToPrint = this.mainTable.get(0); newWin = window.open(""); newWin.document.write('<html><head><title>' + elementToP ...

jqueryasp.netcsstwitter-bootstrap

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

javascripthtmlcssreactjsmaterial-ui

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...

htmlcssinternet-explorer-7

A guide to incorporating external CSS files in Angular 5 components using styleUrls

I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application. The parent application consists of JSP and other AngularJS applications among other things. My goal is to include a CSS file from the parent ...

javascriptcssangularangular-cliangular-components

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

javascripthtmldom

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

htmlcss

Interacting with an iframe element using Selenium in Python

I have a webpage with an iframe embedded, and I'm using Selenium for test automation: <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="dis ...

javascriptpythonhtmlseleniumiframe