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

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

preserving the current state even after refreshing the page

Currently, I am teaching myself React. When I click on the favorites button, which is represented by a heart symbol, it changes color. However, upon refreshing the page, the color change disappears. To address this issue, I came across the following helpfu ...

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

There are three individuals each working on separate sections of a webpage. One is focusing on moving images, another is devoted to the tab section. This begs the question: 1) Is it feasible to embed all these HTML sections into a single HTML page and dis ...

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

Selenium Mouse/Pointer Display

Is there a way to visualize the selenium mouse movements during test execution? Can we display a windows cursor image or any kind of indicator like a dot or crosshair? I am currently working on implementing a drag and drop feature using Selenium and Java ...

Is it possible to utilize various return values generated by a regex?

Working on a project where I am utilizing regex to extract links from a Google Calendar XML feed. The links appear in the following format: <a href="http://www.drsketchysdublin.com/event-registration/?ee=11">http://www.drsketchysdublin.com/event-reg ...

Movement occurring outside the boundaries of the element

Whenever I hover over the hyperlink, it extends beyond the text of the link. Check out the jsFiddle demonstration: jsFiddle It seems like it is taking the width of the <div>, causing it to be displayed across the entire <div>. Below is the H ...

Blending PHP with jQuery

I'm currently working on the same page as before but this time, I'm using it to experiment with jQuery. I'm trying to learn it for my 'boss', but unfortunately, I can't seem to get the JavaScript in this file to run at all, le ...

The positioning of sub-menu items is incorrect

I would like the subitems in the menu to be positioned directly under the main menu items instead of being slightly offset to the right. CSS ul#menu { float:left; width:100%; margin:0; padding:0; list-style-type:none; background-c ...

Ways to shift pictures sequentially in a horizontal line?

I am currently working on a project in asp.net where I need to rearrange 'x' number of images in a row. To explain the scenario, let's say we have 5 images labeled as 1, 2, 3, 4, and 5. Initially, they are in the order of 1, 2, 3, 4, 5. Then ...

What is the best technique for positioning a div using the ELEMENT_NODE method?

  #top { height: .5rem; padding-left: 2.7rem; line-height: .5rem; color: #666; font-size: .12rem; position: relative; background-color: rgb(241, 241, 241); } #top div { position: ...

The issue of the background image not expanding to cover the entire page when resized is problematic

Hello there, I'm currently working on making my website responsive and I've run into a problem with GIF images. No matter what I do, they just won't fill the entire page. When I try to make them smaller, it leaves white spaces at the top and ...

jQuery AJAX utilizes div elements

I am having trouble using functions in a select element loaded within a div using AJAX in jQuery. Can anyone offer assistance? Here is the snippet of jQuery code: $("#cbo_sede").change(function () { var sede = document.getElementById("cbo_sede").val ...

What are the steps to testing a webpage designed for Retina display?

I have designed a webpage optimized for retina display, but I don't own a monitor with that capability. Is there a simulation tool available to test websites on retina displays? Alternatively, are there non-Apple monitors comparable to Apple's ...

Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website. If you would like to take a look, here is the link to my jsfiddle page. Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it& ...

Is it possible to customize the appearance of HTML input fields pre-populated by the browser

My ASP.NET MVC application has a login page: <form id="account" method="post"> <h2>Use email account to log in.</h2> <hr /> <div asp-validation-summary="ModelOnly" class=& ...

`The Conundrum of Basic HTML Parsing`

Hello, I am currently working on extracting professor names and comments from the ratemyprofessor website by converting each div into plaintext. The following is the structure of the div classes that I am dealing with: <div id="ratingTable"> <div ...

What is the best way to retrieve the value from a textarea and verify if it is blank or not?

I have successfully incorporated a textarea using simpleMde, but I am facing difficulty in retrieving the value and checking whether it is empty or not. var message = document.getElementById("simpleMde").value; console.log(message); <textarea class=" ...

Disabling the default validation message in HTML form inputs

Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...

Divide HTML elements every two words

Can you use CSS to break up HTML content after every 2 words, ensuring it works for any word combination? Example: // Original HTML content The cat is sleeping // Desired result: The cat is sleeping ...