How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box.

* {
  margin: 0px;
  padding: 0px;
}
.navigation-bar {
  height: 3.2em;
  background: gray;
  text-align: center;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.navigation-bar ul {
  display: inline-block;
  list-style-type: none;
}
.navigation-bar li {
  display: inline;
}
.navigation-bar li a {
  color: white;
  padding: 0px 30px;
  margin: 1em 0 0 -2px;
  text-decoration: none;
  float: left;
  height: 1.2em;
  line-height: 1.2em;
}
.navigation-bar li a:hover,
a:focus {
  background-color: #111;
}
<!DOCTYPE html>
<link rel="stylesheet" href="navbar1.css">
<div class="navigation-bar">
  <div id="navigation-container">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Gallery</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

</html>

Check out my code example: https://jsfiddle.net/uz081886/

Currently, when hovering over a tab, a black bar appears. How can I change it so that only the letters of each word are highlighted? For example, when hovering over "Home", the text color would turn black without the black bar appearing?

htmlcsshover

Answer №1

Consider making a change

.navigation-bar li a:hover, 
a:focus {
  background-color: #111;
}

to

.navigation-bar li a:hover, 
a:focus {
  color: #111;
}

This adjustment is effective because background-color affects the element's fill color while color influences the text color.

Answer №2

In CSS, change the background-color property to the color property.

* {
  margin: 0px;
  padding: 0px;
}

.navigation-bar {
  height: 3.2em;
  color: gray;
  text-align: center;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.navigation-bar ul {
  display: inline-block;
  list-style-type: none;
}

.navigation-bar li {
  display: inline;
}

.navigation-bar li a {
  color: white;
  padding: 0px 30px;
  margin: 1em 0 0 -2px;
  text-decoration: none;
  float: left;
  height: 1.2em;
  line-height: 1.2em;
}

.navigation-bar li a:hover,
a:focus {
  color: #111;
}
<div class="navigation-bar">
  <div id="navigation-container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Change background-color to color in CSS

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

HTML - one div's child element takes precedence over another div

My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div. I have implemented click events for both divs. However, when I click on the span that overlaps the second d ...

javascriptjqueryhtmlcss

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

javascriptcssangularionic5

Moving specified data from one interactive table to another interactive table

In my setup, there are two tables - one for products and another for customers: <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Product Code</th> </tr> </thead> ...

angularjshtml

Unable to Retrieve Modified Content with $().text();

In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...

javascriptjqueryhtmldom

My fixed navigation bar is being impacted by the link decorations

I'm fairly new to web development, so please be patient with me. I am trying to achieve a design where my image links are displayed at half opacity by default and then switch to full opacity when hovered over. While this is working as intended, it see ...

htmlcsscontainersopacitynav

powerful enhancer separates the heading into a layout

I have an HTML div element that just isn't behaving right when I resize the screen. The title pretty much sums it up: <div class='serveMessage'><strong>Fun fact:</strong>&nbsp;over 1,259,468 American students fail ev ...

htmlcss

Enhance React scrollbar functionality without relying on third-party dependencies

Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...

javascriptcssreactjsscrollbar

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Applying CSS transformations to scale up a div within its parent body

Having an issue with formatting an anchor link using transform scale attributes on hover. The link is inside a div that's aligned to the right, and I want it to enlarge when hovered over. However, this increase in size also affects the parent div, ca ...

htmlcss

Querying data via AJAX from a specific Laravel route to retrieve a JSON encoded array filled with dates to populate ChartJS labels

My Laravel 5.7 project includes ajax and ChartJS functionality. Upon page load, an ajax call is made to "action_route", which retrieves the labels for the ChartJS. The PHP function json encodes an array of labels, which are then decoded by the ajax call. ...

jqueryhtmljsonlaravelhtml-entities

Created an HTML and PHP form, but struggling to pinpoint the issue

I created a form to send data to an email address. However, after filling out the form and submitting it, the browser displays the following message: Server error. The website encountered an error while trying to access http://localhost/process.php. Be ...

phphtml

Error loading the website on Firefox

The background image in my CSS code is not displaying in the browser. I am currently working in the CodeIgniter framework and using Firefox. #star ul.star { list-style:none; margin:0; padding: 0; width:85px; height:20px; left: 10px; top:4px; pos ...

csscodeigniterfirefox

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element. <div id="MainDiv"> <input type="text" id="MyText"value="Text1" /> ...

javascriptjqueryhtmlcss

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Transform your standard HTML form code into a condensed single-line embed code

I've devoted countless hours to finding a resolution for this issue. It's most likely simple, but alas, I haven't found it yet. My current project involves creating my own HTML forms using HTML and CSS, along with a touch of JavaScript. In ...

html

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?

Although I have experience with implementing Mvvm using Knockout.js, my goal now is to incorporate this framework with cross-browser support for Firefox and Chrome along with HTML5 offline storage capabilities. Specifically, I am looking to bind HTML obje ...

htmlmvvmknockout.jsoffline-storage

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

htmlangulartypescriptroutes

Use Python to fetch a file from a webpage without having to actually open the webpage

I needed a method to automate the download of a file from a particular website without having to manually open the website. Everything should be done in the background. The website in question is Morningstar, and a specific example link is: . On this page ...

javascriptpythonhtmlseleniumweb

Excessive padding issues arising from Bootstrap 4 columns and rows

Utilizing bootstrap to structure columns and rows for my images is causing excessive padding around them, deviating from the intended design: https://i.sstatic.net/8cQVg.png Here's the HTML structure I employed: <!-- header --> <header> ...

htmlcssbootstrap-4

The buttons on the Bootstrap Carousel are unresponsive and the indicators are not displaying as they should

I am currently attempting to replicate a bootstrap carousel that includes indicators. However, in my code, I am unable to view the indicators, and the previous/next buttons are not functional. Although I came across a workaround that I could modify from th ...

javascripthtmlcssbootstrap-5