Remove ':Hover' CSS Behavior from Element

Remove ':hover' CSS behavior from element

I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.

Example:

.test {  border: 0px; }

.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>

<div class="test"> blah </div>

<div class="test testhover"> blah </div>

How to remove/ignore :hover css style on touch devices

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

How to disable the hover effect of material-ui button inside of a styled component

You can solve this problem by adding an inline style

export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}
      style={{ backgroundColor: 'transparent' }} >
      login
    </StyledButton>
  )
}

How to prevent sticky hover effects for buttons on touch devices

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
    background-color: blue;
}

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

How to disable Hover effect on CSS?

Here is what you can do:

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: darkslategray;

}

li {

  float: left;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 10px;

  text-decoration: none;

}

li a:hover {

  background-color: cadetblue;

}

#sty {

  border: 2px solid cadetblue;

  border-radius: 50px;

  outline: none;

}

#nohvr {

  background-color: unset;

}

<body>

  <ul>

    <li><a href="#home"><i class="fas fa-home"></i></a></li>

    <li><a href="#">News</a></li>

    <li><a href="#">Contact</a></li>

    <li><a href="#">About</a></li>

    <li style="float: right;">

      <a id="nohvr" href="#">

        <label>

            <input id="sty" type="search">

        </label>Search</a>

    </li>

    <li style="float: right;"><a href="#">Register</a></li>

    <li style="float: right;"><a href="#">Login</a></li>

  </ul>

</body>

See :hover state in Chrome Developer Tools

Now you can see both the pseudo-class rules and force them on elements.

To see the rules like :hover in the Styles pane click the small :hov text in the top right.

Toggle element state

To force an element into :hover state, right click it and select :hover.

Force element state

Additional tips on the elements panel in Chrome Developer Tools Shortcuts.

Change :hover CSS properties with JavaScript

Pseudo classes like :hover never refer to an element, but to any element that satisfies the conditions of the stylesheet rule. You need to edit the stylesheet rule, append a new rule, or add a new stylesheet that includes the new :hover rule.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

Forcefully remove hover css effect of element inherited from remote css library

The solution depends on how you distinguish what rows you want to disable the css on. Two options are adding a special class to the <tr> in the html or using JavaScript.

Option 1

Add a special class to the tr's and make your own css.

css:

.row_with_exception {
    // custom css
}

html:

<tr class='row_with_exception'></tr>
<tr class=''></tr>
<tr class='row_with_exception'></tr>
<tr class=''></tr>

Option 2

Use Javascript to update the styling on the rows.

First get the rows you want to remove the hover from.

elements = [...] // array of jquery elements

Then for each element add custom css using JQuery.

elements.map(function (el) {
   el.css(...)
}

Remove ':Hover' CSS Behavior from Element