Question

当用户悬停时，我添加了CSS以创建下划线。这些链接是用于提交表单的Javascript命令。

我遇到的问题是：
如果您在一个滚动条上滚动，则会触发另一个链接，或者两者都触发，或者都不触发。

这是CSS：

a:link {
color: black;
text-decoration: none;
}

a:hover {
text-decoration: underline;
text-underline-position: under;
text-decoration-color:  #ff0000;
}

a:active {
color: #ff0000;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

HTML：

<tr>
  <td style="width: 40px;">
     <input type="submit" value="" tabindex="11" class="btnSubmit" formvalidate>
  </td>
  <td style="width: 350px;">
     <div style="padding-bottom: 5px;">
       <a href="javascript.void(0);" onclick="validateForm();">SUBMIT</a>
     </div>
  </td>
  <td width="5%">
     <input type="reset" value="" tabindex="12" class="btnReset">
  </td>
  <td>
     <div style="padding-bottom: 5px;">
       <a href="" onclick="booking.reset();">RESET</a>
     </div>
  </td>
</tr>

还有JS（如果您认为函数可能是罪魁祸首）：

function validateForm() {
    var x = document.forms["booking"]["Email"].value;
    if (x == "") {
        alert("E-mail must be filled out.");
        return false;
    }
}

Answer 1

我删除了下划线位置，它可以正常工作。我的猜测是，您的浏览器可能不支持text-underline-position。这是指向MDN的链接，因此您可以阅读有关其功能和浏览器兼容性的更多信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

css a：link标签的问题

1 个答案: