删除伪类（悬停）Javascript

Question

我想在仅使用Javascript而不是jQquery单击按钮时从悬停中删除框阴影效果。添加规则属性运行良好但不是removerule属性。

JavaScript

  function anim()
    {

        document.styleSheets[0].removeRule('#fab:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }', 0);
        var div = document.getElementById('fab');
        div.className="anim";





    }

HTML

<button  onclick="anim()" id="fab">+</button>

CSS

#fab
{
    margin-right: 30px;
    color: white;
    font-size: 45px;
    outline: 0;
    border:0;
    height: 150px;
    width: 150px;
    border-radius: 75px;

    text-align: center;
    background-color: red;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s ease-in-out;
}
#fab:hover
{
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

Answer 1

为什么不使用:active和:focus州？纯CSS。

#fab:active, #fab:focus {
  box-shadow:none;
}

<强>演示：

#fab {
  margin-right: 30px;
  color: white;
  font-size: 45px;
  outline: 0;
  border: 0;
  height: 150px;
  width: 150px;
  border-radius: 75px;
  text-align: center;
  background-color: red;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.2s ease-in-out;
}

#fab:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

#fab:active, #fab:focus {
  box-shadow:none;
}

<button id="fab">+</button>

Answer 2

虽然我可以为提供解决方案，但使用CSS类似乎更容易解决您的问题：

HTML

<button  onclick="anim()" class="fab some-class-name">+</button>

JS

function anim()
{
  document.querySelector(".fab").classList.remove("some-class-name");
}

CSS

.fab
{
    margin-right: 30px;
    color: white;
    font-size: 45px;
    outline: 0;
    border:0;
    height: 150px;
    width: 150px;
    border-radius: 75px;

    text-align: center;
    background-color: red;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s ease-in-out;
}

.some-class-name:hover
{
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}