Is it possible to alter the background color when hovering over items in a horizontal list that

I'm currently working on a small login and register box that should stay fixed at the top of the page. However, I'm facing issues with changing the background color of the horizontal list when hovered over. Below is the code snippet:

/* Regbox */
ul#regbox{
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li{
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child{
  border-bottom-right-radius: 5px;
}
ul#regbox li a{
  text-decoration: none;
  padding: 5px;
}
a:hover{
background-color: rgba(100, 100, 100, 0.5);
border-radius: 5px;
}
  <div id="regbox">
    <ul id="regbox">
      <li><a href="">Login</a>
      <li><a>|</a>
      <li><a href="">Register</a>
      </ul>
  </div>

I am aiming for the list items to change their color on hover similar to this example:

ul#navigation{
  width: 12px;
  float: left;
  padding: 0;
  position: fixed;
}
ul#navigation li{
  list-style: none;
  background-color: rgba(77, 77, 77, 0.8);
  float: left;
  font-size: 20px;
  margin: 0;
  width: 70px;
}
ul#navigation li:last-child{
    border-bottom-left-radius: 5px;
}
ul#navigation li:first-child{
    border-top-left-radius: 5px;
}
ul#navigation li a{
  display: block;
  padding: 5px;
  text-decoration: none;
}
a:link, a:visited{
  color: rgb(0, 0, 0);
}
a:hover{
background-color: rgba(77, 77, 77, 0.5);
border-radius: 5px;
}
  <nav>
  <ul id="navigation">
  <li><a href="main.html">Home</a>
  <li><a href="store.html">Store</a>
  <li><a href="about.html">About</a>
</ul>
</nav>

I've experimented with setting the display property to "block" on hover, but it resulted in breaking the list structure.

Your assistance on this matter would be greatly appreciated.

Thank you,

Ivar

htmlcsslistcolorsbackground

Answer №1

After some trial and error, I managed to come up with a workaround solution. Instead of changing the background color of the <li> element, I focused on altering the <a> background instead. The result is a new look and functionality that appears as follows:

If you have a more efficient solution in mind, feel free to share - I'm open to suggestions!

Answer №2

After reviewing your CSS and HTML, I made a few tweaks to improve the code.

(1) The id on the div has been removed since id values should be unique per page.

(2) Instead of using display: inline on the child li, I switched it to float: left.

(3) To simplify the hover rules, you can use this updated style:

ul#regbox li:hover a {
    background-color: rgba(64, 64, 64, 1);
}

If you exclude the "|" character from the a tag, hovering over it will not be an issue.

You were very close to achieving the desired outcome with your initial code, so you are definitely on the right track.

ul#regbox {
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li {
  list-style: none;
  float: left;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child {
  border-bottom-right-radius: 5px;
}
ul#regbox li a {
  text-decoration: none;
  padding: 5px;
}
ul#regbox li:hover a {
  background-color: rgba(64, 64, 64, 1);
}
<div>
  <ul id="regbox">
    <li><a href="">Log in</a></li>
    <li>|</li>
    <li><a href="">Sign up</a></li>
  </ul>
</div>

Answer №3

Make sure to properly close the li tags and avoid using the same ID in both the div and ul elements. Additionally, check for any extra "}" after ul#regbox li a{ } in your question. Don't forget to comment out the :hover section in the CSS. Feel free to ask me any questions in the comments.

    ul#regbox {
  width:auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}

ul#regbox li {
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}

ul#regbox li:last-child {
  border-bottom-right-radius: 5px;
}

ul#regbox li a {
  text-decoration: none;

}

ul#regbox li:hover {
  background: blue; /* you can use your color */
  border-radius: 5px;
color:white; /* set this for text color you can remove this*/
}
<div>
  <ul id="regbox">
<li><a href="">Login</a></li>
<li><a>|</a></li>
<li><a href="">Register</a></li>
  </ul>
</div>

Answer №4

#menucontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#menucontainer ul li { display: inline; }

#menucontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#menucontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
<div id="menucontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">About</a></li>

</ul>
</div>

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

Issues with functionality of Bootstrap carousel slider

Currently, I'm attempting to put together a Bootstrap carousel slider with indicators by referencing the Bootstrap code. The caption setup is functioning as expected, but I'm encountering issues with the slider itself. The problems I'm faci ...

htmljquerycssbootstrap-5

Make the divs inside the parent element grow to occupy the available space, while ensuring they do

I need to set specific minimum and maximum values for the width and height of left-floated divs and make them expand to fill the parent element (body). I am curious if there is a way to achieve this using CSS, or if I should resort to JavaScript. When you ...

javascriptjquerycss

What is a method for choosing information from a webpage without relying on the written words?

Is there a way to select and click the blog title without relying on the text, which can change frequently? Unfortunately, I don't have an "li" tag, so my previous methods aren't working in this scenario. Any assistance would be greatly appreciat ...

javahtmlcssselenium-webdriver

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

Exploring the potential of CSS Grid with dynamic content

I have a paragraph that contains text, possibly a span element, as well as some pseudo-content using the :before and :after selectors: <p>Regular text with no span</p> <p>Extra content with a <span>span</span></p> My go ...

csspseudo-element

Forced Landscape Viewing on Mobile Site with No Auto-Rotation

My website is equipped with a mobile stylesheet: <link rel="stylesheet" href="css/mobile.css" media="handheld"> In addition to that, I am utilizing jQuery to customize functionality for mobile devices. I am wondering if there is a method to enforc ...

jquerycssmobilelandscapeautorotate

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

jqueryhtmlcss

AngularJS Ng-Repeat not looping through elements within $Scope

I'm currently attempting to retrieve a Json array of objects from my Employees API, and here is what is being returned: [ { "Id": "00162c3a-2b70-4f50-80e8-6fee463cffdb", "EmployeeNumber": 123, ...

javascripthtmljsonangularjsangularjs-ng-repeat

Create an Angular directive that highlights a div if any of its child inputs have focus

I've developed an Angular directive for a repetitive section containing form elements. My aim is to have the entire section highlighted whenever any input field inside it is focused. template.html <div class="col-md-12 employee-section"> <l ...

javascriptjquerycssangularjshtml

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

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

javascriptjqueryhtmlformsmeteor

Disabling tooltip functionality on an element

Trying to figure out how to remove a tooltip from an element once the text is no longer truncated. The challenge lies in not being able to access the event of the tooltip itself. The tooltip is added by setting an attribute on truncation, but simply removi ...

javascripthtmlangularjsangular-ui-bootstrap

What could be causing the issue with the jquery height function not functioning properly

I am working on a website where the menu bar and footer need to be 50px in height as shown in the image. In between the nav and footer, there is a content div that should occupy the remaining space. To achieve this, I plan to use Jquery to calculate the do ...

jqueryhtmlcss

mixture of fluid and static width list items

Here is my custom HTML code snippets: </div><!-- /end .topbar --> <ul class="nav"> <li class="first"><a href="#">Time added</a></li&g ...

htmlcssresponsive-design

What is the best way to pass a variable from one PHP file to another?

This question may seem like a duplicate, but I found no helpful answers elsewhere. I'm in the process of creating a website where users can respond to various types of questions. To achieve this, I've written code that displays the corresponding ...

phphtmlmysql

Create a stunning border image with a touch of transformation

Dealing with a button dilemma here. The client wants the border to also be the image, which is creating quite the challenge for me. Changing the box is no problem, but the tricky effect on the next button is preventing me from making the necessary adjustme ...

htmlcssfrontend

Using jQuery with HTML 5 to make a field required only if a radio button is

I am currently working on a form that includes radio buttons, and I want specific fields to be required when certain radio buttons are checked. The issue I am facing is that my JavaScript code doesn't seem to be adding the required attribute to the co ...

javascriptjqueryhtml

Exploring the relationship between CSS z-index values and a canvas

http://jsfiddle.net/y2q3yLpj/ In my example, I tried setting the z-index of a canvas to 0 and the z-index of a div to 1. However, despite this configuration, the canvas appeared higher than the div. Surprisingly, when I set the z-index of the canvas to -1 ...

cssz-index

What is the best way to check the difference between the current date and time with another date and

Seeking assistance in comparing 2 dates using JavaScript has been a bit challenging for me. I haven't found the exact solution on this platform yet. As a beginner in JavaScript, I initially assumed that obtaining the current date and time would be a s ...

javascriptjqueryhtmldatetimeif-statement

Expanding Visual Composer (WP bakery): fitting smaller images into the viewport

Incorporating Visual Composer (WP Bakery), I have successfully implemented a banner image with a width of 1200px. However, the challenge arises as the maximum viewport width is 1900px. My goal is to configure a Row containing a Single Image element that wi ...

csswordpressvisual-composer