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

What is the best approach to extracting tightly-coupled code and converting it into an external library?

I have a question regarding paradigms that I would like to address, and if this is not the appropriate platform, please guide me to the right place. Your recommendations are most welcome :) Currently, I am tasked with extracting a significant piece of fun ...

javascripthtmlparadigms

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

htmlangulartypescriptautocomplete

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

javascriptjqueryhtmlcss

Is it possible to adjust an inline CSS style upon clicking a link?

I currently have a form that is hidden using inline styling style="display: none;" Is there a way to dynamically update this style to style="display: inline;" once a specific link on the page is clicked? ...

htmlcssstyles

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

Currently, I am working on a button that contains a span element. I am interested in finding a way to change the background of the span when the button is clicked and have it remain changed. Is there a way to achieve this using CSS only? I am aware that ...

htmlcss

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

cssreactjsreact-routercreate-react-app

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...

javascriptjqueryhtmlweather

Creating a table in HTML using the innerHTML property

document.getElementById("outputDiv").innerHTML = ""; document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; for(j=1;j<=10;j++) { document.getElementById("outputDiv").innerHTML += "<td align=center>"+St ...

javascripthtml

concealing the dropdown in React upon clicking outside of it

I have been delving into learning React by challenging myself with a React problem. The code challenge I'm facing involves trying to close a drop-down when clicking outside of it. Despite my efforts to debug, I haven't had much luck in solving th ...

javascripthtmlcssreactjsreact-hooks

What is the best method for eliminating buttons and text in a row using CSS?

I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button. Here are my CSS snippets: .google-button { color: white; borde ...

javascripthtmlcss

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

javascripthtmlcsstypescript

Looking to trigger a PHP page by clicking on a div?

Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...

phpjavascriptajaxhtml

Having trouble getting wire:click to work within an if statement in Laravel Livewire

I am currently in the process of creating a popover feature for my website that should open when I click on a phone number. Upon clicking on the phone number, it triggers a function called "startCall" in my Livewire component which sets the value of $calli ...

phphtmlcsslaravel-livewirelaravel-livewire-wireclick

The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...

htmlcssbootstrap-4

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

javascriptjqueryhtmlcssflickr

Utilizing the child element's attribute value in a list to dynamically modify the CSS styling of a div element

I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars bas ...

javascriptjquerycsshtml

What's Going on with My Angular Dropdown Menu?

Snippet of HTML code: <li class="nav-item dropdown pe-3"> <a class="nav-link nav-profile d-flex align-items-center pe-0" (click)="toggleProfileMenu()"> <img src="assets/img/profile-img.jpg" alt=& ...

htmlangulartypescriptdropdownbootstrap-5

How can I create numerous HTML containers using Javascript?

I've been learning from this tutorial: Instead of just displaying the last database object, I want to display all of them. I have tried outputting the database contents and it's working fine. Now, I just need to adjust the HTML. I attempted to ...

javascripthtmlfirebasefirebase-realtime-database

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax