如何禁用 CSS :hover 效果？

任务是从元素中移除 CSS:hover 属性。在这里，我们将使用 JavaScript 来解决这个问题。
方法一：

• 只需通过.removeClass() 方法使用 JQuery 删除将悬停效果添加到元素的类。

示例 1：此示例使用上述方法。

  
  
     
         
          How to Disable a CSS :hover effect.
        
            
        
        
           .element {
               height: 100px;
               width: 200px;
               background: green;
               color: white;
               margin: 0 auto;
           }
           .hover:hover {
               background: blue;
           }
        
     
      
          
            GeeksForGeeks  
        
        
        
        
            Hover It
        
        
         
            Click here
        
        
        
        
            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";
            }         
         
      

输出：

• 在点击按钮之前：
  
• 将鼠标悬停在元素上：
  
• 点击按钮后：
  

方法二：

• 只需使用 JavaScript 通过.classList.remove() 方法删除正在向元素添加悬停效果的类。

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

  
  
     
         
           How to Disable a CSS :hover effect.
        
        
           .element {
               height: 100px;
               width: 200px;
               background: green;
               color: white;
               margin: 0 auto;
           }
           .hover:hover {
               background: blue;
           }
        
     
      
          
            GeeksForGeeks  
        
        
        
        
            Hover It
        
        
         
            Click here
        
        
        
        
            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";
            }         
         
      

输出：

• 在点击按钮之前：
  
• 将鼠标悬停在元素上：
  
• 点击按钮后：