如何禁用 CSS :hover 效果

任务是从元素中删除 CSS:hover 属性。这里我们将使用 JavaScript 来解决这个问题。

方法1

仅使用 JQuery 的 .removeClass() 方法 移除给元素添加 hover 效果的类。

示例 1： 以下示例使用了上面讨论的方法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script> 
<style> 
    .element { 
        height: 100px; 
        width: 200px; 
        background: green; 
        color: white; 
    } 
    .hover:hover { 
        background: blue; 
    } 
</style> 
<h1 id="h1" style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"> 
</p> 
<div id="div" class="element hover"> 
    Hover It 
</div> 
<br> 
<button onclick="gfg_Run()"> 
    Click here 
</button> 
<p id="GFG_DOWN"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var heading = document.getElementById("h1"); 
    var div = document.getElementById("div"); 
    el_up.innerHTML = 
    "Click on the button to remove the CSS:hover effect."; 
    function gfg_Run() { 
        $('#div').removeClass('hover'); 
        el_down.innerHTML = "Hover effect Removed"; 
    }         
</script>

输出：

如何禁用 CSS :hover 效果

方法2

通过使用JavaScript，使用 **.classList.remove()方法 **去除添加了悬停效果的类。

示例2： 此示例使用了上述方法。

<style> 
    .element { 
        height: 100px; 
        width: 200px; 
        background: green; 
        color: white; 
    } 
    .hover:hover { 
        background: blue; 
    } 
</style> 
<h1 id="h1" style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"> 
</p> 
<div id="div" class="element hover"> 
    Hover It 
</div> 
<br> 
<button onclick="gfg_Run()"> 
    Click here 
</button> 
<p id="GFG_DOWN"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var heading = document.getElementById("h1"); 
    var div = document.getElementById("div"); 
    el_up.innerHTML = 
    "Click on the button to remove the CSS:hover effect."; 
    function gfg_Run() { 
            document.getElementById('div').classList.remove("hover"); 
        el_down.innerHTML = "Hover effect Removed"; 
    }         
</script>