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

Font rendering issue in Chrome extension

I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font ...

javascriptcssgoogle-chrome-extensionfonts

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

Maintaining the format of forms input in Rails and HTML: Tips and tricks

Hey there! I'm working on a Rails app that has a simple HTML form. One of the fields is called description, which is a text_area. I want to be able to display its input exactly as it was entered on the index page. For instance: If someone enters a l ...

htmlruby-on-railsruby-on-rails-3forms

How to style the second child div when hovering over the first child div using makeStyles in Material UI

I am working on a web project with a parent div and two child divs. I need to apply CSS styles to the second child div when hovering over the first child div. Below is the structure of the render method. <div className={classes.parent}> <div c ...

javascriptcssreactjsmaterial-uimakestyles

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

Creating formatted code blocks within my HTML document

I'm currently working on achieving this layout in my HTML: https://i.stack.imgur.com/2LEQO.png Here is the JSFiddle link: https://jsfiddle.net/cr9vkc7f/4/ I attempted to add a border to the left of my code snippet as shown below: border-left: 1px ...

htmlcsstwitter-bootstrap

Function exhibiting varying behavior based on the form from which it is called

Currently, I'm utilizing AJAX to execute a server call, and I've noticed that the behavior of my function varies depending on its origin. Below is an excerpt of the code that's causing confusion: <html> <body> <script> ...

javascriptphpjqueryhtmlajax

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

htmlcssnavigationsubmenu

The design problem arises from using jQuery to dynamically prepare the table body at runtime

The table row and data are not appearing in the correct format. Here is a link to the problem on Fiddle: http://jsfiddle.net/otc056L9/ Below is the HTML code: <table border="1" style="width: 100%" class="eventtable"> <thead style="color: b ...

javascriptjqueryhtml

Encountered an unexpected "<" error while using Ajax with MySQL

I am trying to accomplish a simple task - retrieve a table from a MySQL database. Previously, I was using basic MySQL code and it was working fine. However, after switching to MySQLi, I encountered an error: Uncaught SyntaxError: Unexpected token < ...

phphtmlmysqlajaxmysqli

Implementing CSS in Laravel 8

After placing my CSS file in the public/css folder, I included it in the head section with the following code. <link href="{{ url('/css/app.css') }}" rel="stylesheet"> Unfortunately, the CSS styles are not being applied ...

csslaravel-8

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

javascripthtmljquery

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

Converting yard values to meter values using AngularJS: A comprehensive guide

My task is to convert meter values to yard using two dropdowns. The first dropdown contains various values, while the second dropdown has "meter" and "yard" options. If "meter" is selected in the second dropdown, the values in the first dropdown remain unc ...

htmlangularjsvalueconverter

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

csswebpacksass

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

javascripthtml

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

jqueryhtmlcss

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is per ...

javascriptjqueryhtmlcss

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

htmlcsshyperlinkalignment

Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...

htmlcsstwitter-bootstrap