Unable to implement the hover property for the entire class in CSS

I am struggling to highlight the entire class element on hover. Even though I have specified the button class as a selector, only the background color of the anchor tag is changing when I hover over the button. What could be causing this issue and how can I change the background color of the entire li item (button class) on hover?

As a newcomer to web development, any helpful explanation would be greatly appreciated.

.button {
        height: fit-content;
        width: 150px;
        padding: 20px;
        margin: 20px;
        text-align: center;
        background-color: gray;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: white;
        float: left;
        border: 1px solid #ff0023;
      }

      .button :hover {
        background-color: green;
      }
<li class="button">
        <a href="#aboutus">about us</a>
      </li>

javascripthtmlcss

Answer №1

Remember, it should be .button:hover and not .button: hover

.button {
  width: 150px;
  padding: 20px;
  margin: 20px;
  text-align: center;
  background-color: gray;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: white;
  float: left;
  border: 1px solid #ff0023;
  cursor: pointer;
  outline: none;
}

.button:hover {
  background-color: green;
}
<li class="button">
  <a href="#aboutus">about us</a>
</li>

Answer №2

In CSS, it is important to ensure there is no space between the button and hover. Here is a code snippet that may help you achieve this: 

.button {
height: fit-content;
width: 150px;
padding: 20px;
margin: 20px;
text-align: center;
background-color: gray;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
float: left ;
border: 1px solid #ff0023;
 }

.button:hover {
     background-color: green;
 }
 <li class="button">
    <a  href="#aboutus" >about us</a>
 </li>

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

Troubleshooting a Node.js problem with variable scope

I'm working on a nodejs route that downloads a URL as an mp3 using npm-youtube-dl. I have a download directory being monitored with chokidar for new files, and once a file is added, I save the file link. After the download completes, a function is cal ...

javascriptnode.jsexpressyoutube-dl

Having trouble with updating React state? The useEffect hook runs when attempting to change the state, but it seems to have the

Having worked with useEffect and its ability to trigger after a state variable has been updated, I am well-versed in its functionality. I'm currently drafting this post on my phone while away from home. Here's the setup I have: const [dateValue ...

javascriptreactjstypescript

How can I verify if my discord.js bot has the necessary permissions from a server or channel?

I need to verify two things: Determine if my bot has a particular SERVER permission (return true/false based on the presence of that permission) Confirm if my bot possesses a specific CHANNEL permission (return true/false depending o ...

javascriptnode.jsdiscord

Unable to access 'read more' link in WordPress post - seeking solution

Is there a way to move the "read more" link to the end of the post on my blog homepage? Currently, all the content of the post is displayed on my homepage. I want to restrict the characters shown and have the link at the end. Thank you! ...

phphtmlcsswordpress

Shifting hues of dots within a grid according to the passing of time

As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...

javascripthtmlcssarraysmultidimensional-array

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Synchronizing Database with Javascript

I've been developing a real-time JavaScript Application that necessitates immediate synchronization between the database and JavaScript. Currently, whenever there are changes in JavaScript, an ajax call is made to the API to update the DOM accordingl ...

javascriptmysqlsynchronization

Using Vue.js to Retrieve Data from an API and Refreshing Components When the Vuex State Changes

Coming from a jQuery background, I recently ventured into the world of Vue. Eager to learn more, I embarked on a project to create a simple user search and view details app. However, I've hit a roadblock and can't seem to find my way forward. ht ...

javascriptvue.jsvuejs2

What could be causing the IndexDB to overlook my totalMoney object Store?

If you're new to Index DB, you might be facing a simple fix issue that's not in your code. Utilizing live server for display, the error you encounter is regarding the total Money not displaying as expected in the HTML, generating a console error: ...

javascripthtmlcssindexeddb

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

htmlcssparticles.js

Detection of Unauthorized Video Downloads

Is it feasible to identify individuals who illegally download videos from websites, such as YouTube, by using video grabber applications? I wonder if these downloads could be traced in some way, enabling the identification of offenders. Is there a method t ...

phphtmlflashvideovideo-streaming

What is the best way to retrieve child elements from JSON within an Angular JS controller?

I'm having trouble understanding how to ensure the resource call completes before assigning the data.properties to $scope in my controller. My confusion lies here: The resource call returns the following response: [ { "PreAlertInventory": "5.00 ...

javascriptangularjs

Tutorial on Removing and Re-Adding HTML Elements

Currently, I am utilizing Jquery to temporarily remove an element from the DOM. This specific element consists of an HTML5 video element. However, upon re-adding this element back into the DOM, the video is unable to play and the element appears as blank o ...

javascriptjqueryhtmldomhtml5-video

JavaScript: Generate a JSON object with customizable key-value pairs

Suppose we have two arrays containing possible numerical values: var reg = [1000, 1010, 2050]; var ag = [100, 101, 102]; The objective is to create an object/json structure like this: { 1000 : [100, 101], 1010 : [100, 101, 102], 2050 : [100, 102]}; The ...

javascriptarraysjsonobject

Adjusting the dimension of input elements using CSS

Is it possible to change the width of an input without using HTML? I had set the size to "35" and it looked fine on the site (check here at the bottom of the site) until I started working on the mobile version. Now, with a size of 35, it appears very wide ...

htmlcssformsinput

How to iterate through two objects simultaneously using a directive in Angular and Vue.js

I am facing a challenge with creating an Angular directive that can iterate over a data object and display its values along with the values of a second unrelated object with similar structure. Currently, I am developing a translation app where the origina ...

javascriptjsonangularjsvue.js

Steps to append information to Firestore if it is not already in the database?

In my Firestore database, I have a collection called Products. Here is the JSON structure for the Products: { Id1: {"product": "product1"}, Id2: {"product": "product2"}, Id3: {"product": " ...

javascriptnode.jsjsongoogle-cloud-firestore

Removing one element from an array with mongoose

As a newcomer to web development, I am currently working on creating a todo app. Below is the schema and model that I have: const tdSchema = new mongoose.Schema({ category: { type: String, required: true, unique: true }, tds: { type: ...

javascriptnode.jsmongodbexpressmongoose

Diverse Range of Exports Available in React Component Library

I have been working on developing a component library consisting of multiple independent components. My objective is to enable users to easily import and use these components in their projects, similar to the following: import One from 'component-lib ...

javascriptreactjstypescriptwebpack

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

Greetings, this is my first post so please forgive me if I miss anything or fail to explain clearly. All the code below is within the same PHP file. Here is my AJAX call: $.ajax( { type: "POST", url: window.location.href, data: {func: 'g ...

javascriptphpjqueryajax