Question

我对编码非常陌生，所以我需要你们的帮助！我编写了这些代码来运行测试，但在Chrome中进行预览时，似乎无法加载jQuery。（我使用Atom进行编码）

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <link type="text/css" rel = "stylesheet" href = "stylesheet.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="script.js"></script>

  </head>

  <body>
    <h1>Hello</h1>
      <p>This is just a test</p>

    <div></div>
  </body>
</html>

CSS

h1 {
  color: #6D9CAE;
  font-family: Futura;
  font-size: 40px;
  font-weight: lighter;
}

h2 {
  color: #bb2025;
  font-family: Futura;
  font-size: 40px;
  font-weight: lighter;
}

p {
  color: #54748B;
  font-family: Avenir;
  font-size: 20px;
  font-weight: bold;
}

div {
  background-color: #223C4A;
  height: 100px;
  width: 100px;
  border-radius: 100%;
}

.active {
  background-color: #a5b000;
}

的javascript

$(document).ready(function(){
  $('div').hover(function(){
    $('div').addClass('.active')
  });
});

我试图让鼠标在悬停时改变颜色，但它无法正常工作。不确定我是否对javascript做了任何错误。我尝试从某个地方复制一个有效的代码（html，css，script），然后使用chrome和safari进行预览，这也不会起作用。

那么，如何在预览时让脚本工作？

谢谢！

Answer 1

您需要删除'。'当您使用'.addClass'时，来自'.active'

试试这个：

$(document).ready(function(){
  $('div').hover(function(){
    $('div').addClass('active');
  });
});

jQuery在预览时似乎不起作用

1 个答案: