How to fix CSS background color when hover a mouse pointer-CodePudding

My current app has a little box that allows users to upload files. I want to apply one single color to this box but it seems like the color changes when I hover a mouse pointer over the box. For example, the Dash code that builds the button looks like this.

 dbc.Row(
    dbc.Col(
          lg={"size": 6, "offset": 3},
          xs=12,
          children=dbc.Button(
                id="upload-button",
                className="upload-button",
                href="#",
                n_clicks=0,
                children=["Upload Files"],
                                            ), #Please ignore incomplete brackets at the end.

Then, the css part looks like this.

.upload-button {
    width: 100%;
    background-color: rgba(24, 72, 90, 1);
    font-weight: bold;
    font-size: 20px;
    border: solid 0.1px rgba(24, 72, 90, 1);
}

The color I want is rgba(24, 72, 90, 1) but when I hover a mouse pointer over the "Upload Files" box, it changes into random blue. How do I fix this issue?

CodePudding user response：

I am not sure what your app module is (Django or just a desktop application). In either case, if your application module supports all of the CSS statements and logic, you probably need to define a statement that contains the class name of the tag (in your case .upload-button) followed by :hover.

.upload-button:hover {
  color:rgba(24, 72, 90, 1);
}

Explanation

This code does not mean that you have to delete your previous CSS statements! The :hover selectors just points to the events that mouse hovers the tag (in your case, the tag with class .upload-button:hover). Your CSS file would be something like what follows:

.upload-button {
    width: 100%;
    background-color: rgba(24, 72, 90, 1);
    font-weight: bold;
    font-size: 20px;
    border: solid 0.1px rgba(24, 72, 90, 1);
}
.upload-button:hover {
  color:rgba(24, 72, 90, 1);
}