Question

由于某种原因，鼠标悬停在Firefox上的字体标签中不起作用，在chrome上正常工作，但在Firefox中不起作用。如果我尝试将鼠标悬停在另一个标签上（例如按钮和div），它将按预期工作。我正在使用firefox 64.0

下面是codepen中的一个示例：https://codepen.io/luansergiomattos/pen/MZoMPX

<body>
    <div class="header__account">
        <button class="header__font">
            <font  class="header__font">LOGIN</font>
        </button>

        <button>
            <font class="header__font">REGISTER</font>
        </button>
    </div>
</body>

css

 .header__font:hover {
    animation: 0.5s ease-out 0s 1 forwards highlight;

  }

  .header__font::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -7px;
    background: red;
    visibility: hidden;
    border-radius: 5px;
    transform: scaleX(0);
    transition: 0.25s linear;
  }

  .header__font:hover::before {
    visibility: visible;
    transform: scaleX(1);
  }

.header__font:focus::before {
    visibility: visible;
    transform: scaleX(1);
  }
}

很抱歉，如果我的代码中包含很多内容，我只是从正在工作的项目中复制了

我该如何解决？

Answer 1

根据here，HTML5不支持字体标签，我建议您必须更改代码。

但是，我发现下面的编码有效。

<div class="header__account">
    <button class="header__font">
        LOGIN
    </button>
    <button  class="header__font">
        REGISTER
    </button>
</div>

Answer 2

这可能会帮助您...

var tfield1=document.getElementById("textfield1");
var tfield2=document.getElementById("textfield2");
var rfield=document.getElementById("resultfield");
var form=document.getElementById("formcalculate");

function activatechangequestion(){
var changequestion=document.getElementById("changequestion").value;
var getQuestionNumber= parseInt(changequestion);

switch(getQuestionNumber){
    case 1:
        document.getElementById("question1").removeAttribute("hidden");                 
    break;

    case 2:
        document.getElementById("question2").removeAttribute("hidden"); 
    break;
}

}

字体标签悬停在Firefox上不起作用，但在chrome上正常工作

2 个答案: