Why isn't my CSS button changing color on hover?

div ul li a.button:hover {
  text-color:#FF0000;
  background: #0040FF;
}

I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the code for the button as well as where it should be implemented:

<div>
  <ul>
    <li><a href= "index.html"><span>Home</span></a></li>
    <li><a href= "about.html"><span>About</span></a></li>
    <li><a href="help.html"><span>Help</span></a></li>
    <li><a href="links.html"><span>Links</span></a></li>
    <li><a href="About Me.html"><span>About Me</span></a></li>
  <ul>
</div>

All the buttons are meant to have the same hover effect with a color transition but for some reason this is not working on my live website.

htmlcss

Answer №1

experiment with setting the background color to #0040FF;

also, include the .button class in your link elements, for example: 

<a class="button"....>....</a>

Answer №2

Update your CSS with the following code:

div ul li a.button:hover {
    color:#FF0000;
    background-color: #0040FF;
}

Make sure to change the text color property to 'color' and include the class attribute for each link.

<div>
  <ul>
    <li><a class="button" href= "index.html"><span>Home</span></a></li>
    <li><a class="button" href= "about.html"><span>About</span></a></li>
    <li><a class="button" href="help.html"><span>Help</span></a></li>
    <li><a class="button" href="links.html"><span>Links</span></a></li>
    <li><a class="button" href="About Me.html"><span>About Me</span></a></li>
    <ul>
</div>

Answer №3

The property text-color does not exist.

Try this solution instead:

div ul li a.button {
  color:#FF0000;
  background: #0040FF;
}

Don't forget to include the class in those anchor elements.

Answer №4

eliminate the button using CSS

div ul li a:hover {
  color:#FF0000;
  background: #0040FF;
}

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

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

javascripthtmlangularjs

Enhance Your Charts: Learn how to dynamically adjust zoom levels between two timestamps with just a simple form submission

I have a Zingchart Area Graph that displays events on a timeline with time on the X-Axis. I want to be able to automatically zoom into a specific timeframe on the graph based on user input from a form. For example, if a user selects a start time of 8 AM an ...

javascriptphphtmlcsszingchart

Integrating HTML into a C# Windows form application

Just diving into the world of online shopping and came across an e-commerce cart that I'd like to integrate into my own website. The platform provided me with a HTML code snippet for embedding, which is great. However, I'm wondering if it's ...

c#htmlandroid-studiovisual-studio-2015embed

Emphasize the center row within a moving table

I am interested in developing a scrolling table where only 10 rows are visible at any given time, with the middle row set to stand out even during scrolling. The concept is that as the user scrolls down, the highlighted row changes progressively as they c ...

javascripthtmlcss

Changing the cursor while the onDrag event is active in ReactJs

I want to implement Drag functionality on certain elements in my application, but I am facing an issue where the cursor changes during dragging. How can I change the cursor specifically when onDrag is active? ...

javascriptcssreactjs

Only allowing designated email addresses to authenticate using Gmail Oauth

Is there a way I can limit logins by doing the following? I'm facing an issue where the page keeps reloading constantly after logging in once. function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('Name: ...

javascripthtmlgmail

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

cssreactjsstyled-components

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

Is it possible to use template literals in the append method and get the index of the row generated? I understand that calling "this" inside the function selects the specified selector passed as an argument. $(document).on('click', '.ad ...

javascripthtmljquery

a problem with images overflowing in CSS

I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full parag ...

htmlcss

Transmitting flawless data to the Angular controller

In my Angular application, I have some checkboxes that are pre-checked and in the ng-pristine state. How can I receive these inputs in my controller without marking them as dirty when the form is submitted? <input type="checkbox" name="c1" name="favor ...

javascripthtmlangularjsforms

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

javascripthtml

Having trouble updating the value in the toolbar?

Here is an example that I added below: When I click the add button, the value of the "newarray" variable is updated but not reflected. I am unsure how to resolve this issue. This function is used to add new objects: export class AppComponent { ne ...

htmlangulartypescript

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

javascripthtmlcss

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

imagecssvue.jsbootstrap-4

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

javascriptphphtmlajax

Using a variable with the :contains selector

function checkAndUpdateStatus(newName) { $('#myTable').children('tr').remove(":contains('" + newName + "')"); }; The function above is attempting to remove table rows in 'myTable' containing a string matching the ...

jquerycssjquery-selectors

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

javascriptjquerycss

What is the best way to adjust width in Bootstrap for responsiveness?

Is there a way to change the width of div elements using only Bootstrap for responsiveness? I want the div elements to increase their width to 50% when the screen width is reduced to around 600px, but I can't find a breakpoint for the w-* class. I a ...

htmlbootstrap-4

Pressing a button through xpath

I am attempting to click on the button below: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button class="ui-button ui-widget ui-state-default ...

pythonhtmlseleniumxpath

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox