Question

我试图用鼠标将鼠标悬停在按钮上时点亮按钮。但是我这样做的尝试似乎根本不起作用。我一直在使用jQuery来实现以下目标：

$(document).ready(function() {
    $("#knap").mouseenter(function() {
        $("#knap").fadeTo("fast", 1);
    });
    $('#knap').mouseleave(function() {
        $("#knap").fadeTo("fast", 0.5);
    });
});

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="party.css"/>
        <title>test</title>
        <script type='text/javascript' src='test.js'></script>
    </head>
    <body>
       <div id="knap">I don't work!</div>
    </body>
</html>

问题是当我将鼠标悬停在div上时没有任何反应。但我尝试在codecademy中做同样的事情。然而，它运作得很好。

如果您有任何人可以帮助我，我们将不胜感激：）

Answer 1

实现此功能的最佳方法是使用CSS，而不是jQuery。您可以将built-in pseudo-class :hover附加到您的元素选择器（#knap），您可以在其中应用不透明度更改。

原始元素上的transition是为了使不透明度变化需要一些时间，而不是立即发生。

#knap {
   transition: 0.5s opacity;
   opacity: 0.5;
}

#knap:hover {
    opacity: 1;
}

<div id="knap">I don't work!</div>

Answer 2

使用css为您的id元素尝试不透明度

＆＃13;

#knap{
  opacity:.5;
  }
#knap:hover{
  opacity:1;
  }

＆＃13;

<div id="knap">I don't work!</div>

＆＃13;

Answer 3

我建议在CSS中解决这个问题，不需要jQuery。

#knap:hover {
  -webkit-box-shadow: 0px 0px 15px 5px rgba(73, 200, 255, 1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(73, 200, 255, 1);
  box-shadow: 0px 0px 15px 5px rgba(73, 200, 255, 1);
}

<div id="knap">I don't work!</div>

Answer 4

您只需加载jquery源代码即可。 Here我留下了一个JSFiddle，它与您所使用的确切代码一起工作。

使用:hover选择器只能使用CSS获得相同的结果。

在div上显示鼠标悬停

4 个答案: