Css Disable Hover Effect

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>

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>

CSS disable a hover

You have some syntax error in your CSS, Please update your CSS with following code:

a, a:hover {
    color: white;
}

 a {    color: white !important; }
/*  So you can actually see the white link */div {  width: 50px;  height: 50px;  background-color: black;}

<div>  <a href="#">link</a></div>

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>
  )
}

Remove all hover effects through css

Update

This is now supported very decent across all mobile browsers, here is the Can I use link:

html.touch *:hover {
    all:unset!important;
}

Old answer

This is good but not supported very well:

html.touch *:hover {
    all:unset!important;
}

But this has a very good support:

html.touch *:hover {
    pointer-events: none !important;
}

Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.