Question

当鼠标进入链接或将鼠标悬停在链接上时，链接将处于粗体状态，当鼠标离开链接时，它将恢复正常状态，但这不会发生在 toggleClass 无效

这是html代码

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
        <style>
            .bold{
                font-weight: bold;
            }

            .normal{
                font-weight: normal;
            }
        </style>
</head>

<body>
    <a href="#">Link</a>

    <script src="jquery-3.2.1.js"></script>
    <script src="Bind.js"></script>
</body>
</html>

这是JS代码

$(document).ready(function() {
    $('a').bind('mouseenter mouseleave',function(){
        $(this).toggleClass('bold');
    });
});

Answer 1

如果只是大胆的悬停你想实现JS是相当矫枉过正常使用普通的旧CSS

a:hover {
    font-weight: bold;
}

Answer 2

看起来工作正常：

$(document).ready(function() {
  $('a').bind('mouseenter mouseleave',function() {
    $(this).toggleClass('bold');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
        <style>
            .bold{
                font-weight: bold;
            }

            .normal{
                font-weight: normal;
            }
        </style>
</head>

<body>
    <a href="#">Link</a>

    <script src="jquery-3.2.1.js"></script>
    <script src="Bind.js"></script>
</body>
</html>

但@Maantje是对的，如果您只想在bold上应用hover，最好只使用CSS。

Answer 3

$("a").hover(
   function() {
      $( this ).addClass("bold").removeClass("normal");
   }, function() {
      $( this ).addClass("normal").removeClass("bold");
   }
);

toggleClass在jQuery中不起作用

3 个答案: