How to Override CSS :Hover

How to override CSS :hover?

The first rule overrides it because of CSS specificity, i.e. it's more specific.

Change second rule to:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

How should I override hover style of a div in an anchor tag?

Based on your HTML

From your Task

CSS

.fill_a:hover{
  color:white;
  text-decoration:none;
}

.fill_div:hover{
  background-color:pink !important;
}

you should use !important because in your html you already set the style. Meaning that the style that put inside html is priority.

Learn More about styling css https://css-tricks.com/when-using-important-is-the-right-choice/

DEMO

CSS make hover override active class

You can simply do this:

.tabs nav a:hover,
.tabs nav li.active a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

or use important:

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A !important;
}

Hope it helps.

---

On hover, how to override an existing animation style?

Remove the last state from the animation since it's the default one and you will be able to override the transform. Basically the animation will consider the state of the element as the 100% and when you change it on hover it will also change in the animation.

If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.^ref

.list {    display: flex;    flex-direction: column;    align-items: center;    margin: 24px 0;}
.list-item {  cursor: pointer;  margin-bottom: 14px;  padding: 12px 16px;  border-radius: 50px;  background: #EFEFEF;
  animation-name: popin;  animation-fill-mode:both;  animation-duration: .6s;  /*animation-iteration-count: 1; also not needed */  animation-timing-function: ease;  animation-delay: 0.1s;}
.list-item:hover {  background-color: yellow;  transform: translateY(-5px);}
@keyframes popin {  0%{    transform:scale(0);  }  50%{    transform:scale(1.1);  }}

<div class="list">  <div class="list-item">item</div>  <div class="list-item">item</div>  <div class="list-item">item</div>  <div class="list-item">item</div>  <div class="list-item">item</div>  <div class="list-item">item</div></div>

Overriding CSS Hover Colors and !Important

I'm making a bit of an assumption here as to what your problem is, because I'm not 100% sure what you've got going on, but I believe you are mis-using the , in your selectors.

The comma breaks up totally distinct selectors, so if you want to style certain elements under a certain class, you would need to include that class on both sides of the comma, so you should end up with something like this:

.header-menu li:hover, .header-menu a:hover {
    background-color: #b89230;
    color:#fff4d6;
    text-decoration: none;
}

.page-template-cryptofact-page-php .header-menu li:hover,
.page-template-cryptofact-page-php .header-menu a:hover {
    background-color: #836F38;
}

Removing the !importants is probably a good idea... they usually make things more difficult to maintain.

How to override CSS style during hover in a table row?

You need to also override the .tdSignalName colour declaration when the parent is hovered...

.tblSignal:hover .tdSignalName {
    color:#FFFFFF;
}

Example...

.tblSignal {    border-style: solid;}.tblSignal:hover {    background-color: #0072c6;    color: #FFFFFF !important;    font-size: initial;}.tdSignalName {    font-weight: bold;    height: 30px;    font-size: 16px;    color: #0072c6;}.tblSignal:hover .tdSignalName {    color: #FFFFFF;}
.tdSigButton {    text-align: center;    vertical-align: middle;}

<table class="tblSignal" width="500px"><tr>    <td class="tdSignalName" width="400px">        <div>Title</div>    </td>    <td rowspan="2" class="tdSigButton" width="100px">        <div id="divButton">                          <button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>        </div>    </td></tr><tr>    <td class="tdSignalDescription" width="400px">        <!-- _#=ctx.RenderBody(ctx)=#_                 -->        <div><i>SignalDescription </i></div>    </td></tr></table>

Override of Button component doesn't change the hover color

I figured it out.
Here is the code sandbox if anyone cares https://codesandbox.io/s/y2qyk9rn4x

Just need to add this for each variant:

outlined: {
  "&:hover": {
    backgroundColor: "#35C37D"
  }
},

css hover override using only css and JS

Add following in your CSS and make sure you load it after default CSS.

a:hover {
     background-color: NONE !important;
}

Using Javascript

$('body').append('<style>a:hover { background-color: none !important; }</style>');

---

Related Topics