What could be the reason the background-color isn't changing when I apply button:hover?

    body{
font-family:"Arial","Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:450px;
padding:14px;
}

/* ----------- regForm ----------- */
#regForm{
border:solid 2px #b7ddf2;
background:#A9D0F5;
}
#regForm h1 {
font-size:18px;
font-weight:bold;
margin-bottom:8px;
}
#regForm p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#regForm label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#regForm .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#regForm input{
float:left;
font-size:100%;
padding:4px 2px;
border:solid 1px #2E9AFE;
width:200px;
margin:2px 0 20px 10px;

}
input:focus{
color:#848484;
font-weight:bold;
background-color:#FFC;
}
#regForm select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #2E9AFE;
width:200px;
margin:2px 0 20px 10px;
}

#regForm button{
clear:both;
margin-left:150px;
width:150px;
height:50px;
background:#2E9AFE no-repeat;
text-align:center;
line-height:32px;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
}
button:hover{
background-color:#FFC;

}

I am curious why the background color of the button is not changing. Any insights would be appreciated. Thank you!

Just for information, I have included this line in my .html :

<button type="submit">Sign-up</button>

Answer №1

The reason for this behavior is that the selector #regForm button has higher specificity compared to button:hover. To learn more about specificity in CSS, you can refer to this simplified overview:

To resolve this issue, you can use a combination of :hover with an id selector like this:

#regForm button:hover{
    background-color:#FFC;
}

You can also view the demonstration here: http://jsfiddle.net/32MvE/

Answer №2

To achieve this effect, you can either follow scartag's recommendation and use a specific class or utilize an attribute selector:

input[type="button"]:hover {background-color:#FFC;}

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

Attempting to align two div blocks side by side to occupy the entire page

http://jsfiddle.net/UeLMA/1/ Here's the HTML code snippet: <div id="left" style="background: red; display: inline-block; float: left"> aaaa<br /> aaaaa </div> <div id="right" style="background: yellow; float: left">&l ...

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

Is there a way to switch out the navigation icons on the react-material-ui datepicker?

Can the navigation icons on the react-material-ui datepicker be customized? I've attempted various solutions without any success. <button class="MuiButtonBase-root MuiIconButton-root MuiPickersCalendarHeader-iconButton" tabindex="0&q ...

Using ESP8266 as a client and setting up an AJAX web server

My goal is to use ESP8266 as a client that will be controlled by a server running on my computer. I want the server to send commands to the ESP8266 using AJAX, and for the ESP8266 to respond to these commands and also be able to send data back to the ser ...

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

What is the best way to show the totals on a calculator screen?

As part of my work, I created a calculator to help potential clients determine their potential savings. Everything seems to be working fine, except for the total fees not appearing for all the boxes. I believe I might be missing the correct process to add ...

What is causing the z-index to not function properly on my elements?

In my current code setup, I have positioned the hero image at the bottom with an overlay on top that contains text and a button. Additionally, there is a navigation bar with a z-index applied. However, I am facing an issue where the button for viewing my r ...

When using HLS with Media Source Extensions on mobile devices, the <video> element with the muted and autoplay attributes may freeze on the first frame

I recently added a background video to our website using mux.com. The video is set to autoplay with HLS, but Chrome requires Media Source Extensions for playback. To ensure the HTML5 video auto plays, I included the necessary mute parameters as well. How ...

React - Render an element to display two neighboring <tr> tags

I'm in the process of creating a table where each row is immediately followed by an "expander" row that is initially hidden. The goal is to have clicking on any row toggle the visibility of the next row. To me, it makes sense to consider these row pa ...

Differences between -webkit- and -moz-transition

My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...

Discovering hidden files within appsettings.json in ASP.NET Core 6 using Program.cs

Within Appsettings.json, the code resembles the following: { "Project": { "ConnectionString": "Data Source=(local)\SQLSERVER; Database=MyCompany; Persist Security Info=false; User ID='sa'; Password='sa ...

I am seeking assistance with optimizing my website for mobile use as I have exhausted all recommendations I could find without success

After years of working with HTML, I am now faced with the challenge of making my website mobile-friendly. Despite trying various suggestions found online, the mobile version of my site is still not functioning properly. Currently, only about 6 pages are op ...

How to Integrate a DIV Table with Ajax.BeginForm in MVC4

My goal is to integrate a div table with Ajax.BeginForm: This combination will generate the following structure: <div class="Table"> <div class="Title"> <p>This is a Table</p> </div> <div class="Heading"> & ...

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

Position the DIVs at the bottom of the TD

I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

Creating a dynamic columns property for Mat-Grid-List

Is it possible to create a Mat-Grid-List where the number of columns can be dynamically changed based on the width of the container? Here is an example: <mat-grid-list [cols]="getAttachmentColumns()" rowHeight="100px" style="width: 100%;"> <mat ...

Leverage htaccess functionality to modify website configurations without altering the URL

I currently have the following htaccess configuration: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ dl.php?id=/$1 [QSA,L] </IfModule> It works perfectly fine. However, I am facing a problem with my site URLs and images ...

How can a JSON string be assigned to a variable for use in a Google pie chart?

I am currently experiencing an issue with my web server. I am sending a JSON object as an argument via render_template to my website, where I intend to use this data to display a Google pie chart. The problem arises when I try to assign the Google pie cha ...