Question

好的，我知道这些线程中有很少一部分可以说至少，我已经尝试了很多解决方案，但我不能为我的生活似乎让我的jQuery工作。我很确定我已正确链接它并且我在代码中看不到任何明显的错误（虽然我对此很新），并且它有点令人沮丧。

我所做的是用一个名为“按钮”的类创建一些div，我试图让它当你将鼠标悬停在它们上面时，它们会变成半透明状态，当你离开它们时它们会转向恢复正常。但是，出于某种原因，它似乎没有起作用。

无论如何，这是我的HTML的相关部分：

<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

我的jQuery代码：

$(document).ready(function(){
    $(".button").mouseenter(function(){
        $(this).fadeTo("slow", 0.5);
    });
    $(".button").mouseleave(function(){
    $(this).fadeTo("slow", 1);
    });
});

我的CSS，好的衡量标准（以防万一）：

.button {
height:50px;
width:150px;
border-radius:5px;
background-color:#C7C7C7;
border:2px solid black;
display:inline-block;
text-align:center;
font-size:26px;
line-height:50px;
margin-bottom:5px;
}

Answer 1

如果您没有运行某种服务器，并且只在本地进行测试，那么您的问题就出在这一行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

尝试将其更改为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

请注意添加 http：//

为什么呢？您可以在本文中阅读有关无头CDN的内容，但如果您未在本地运行Web服务器，则必须包含http：//

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/#protocolless

使用无协议参考时要记住的主要警告是通过file：///加载的页面会失败（即HTML页面你直接从磁盘加载到您的浏览器）。所以，一定要包括如果你正好在没有开发的情况下开发URL中的http：protocol Web服务器，但不要担心省略它。

Answer 2

您缺少jQueryUI样式表。试试这个：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>

注意最后一个（技术上应该是第二个，但更容易注意到这一点......）

我似乎无法让jQuery工作

2 个答案: