Я не могу заставить JQuery работать

0

Хорошо, я знаю, что там есть несколько таких потоков, и я пробовал много решений, но я не могу, чтобы жизнь меня, похоже, заставила работать jQuery. Я уверен, что правильно связал его, и я не вижу никаких явных ошибок в моем коде (хотя я довольно новичок в этом), и это немного расстраивает.

То, что я сделал, создано несколькими div с классом под названием "button", и я пытаюсь сделать так, чтобы, когда вы наводите на них курсор, они становятся полупрозрачными, а когда вы их оставляете, они возвращаются к нормальной жизни, Однако по какой-то причине он, похоже, не работает.

Во всяком случае, здесь соответствующая часть моего 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;
}
  • 2
    Работает здесь jsfiddle.net/DLXxE
  • 0
    Консольные ошибки? Пробовал что-нибудь регистрировать?
Показать ещё 1 комментарий
Теги:

2 ответа

3

Если вы не используете какой-то сервер и тестируете только локально, ваша проблема может быть связана с этой строкой:

<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, но если вы не используете локальный веб-сервер, то вы должны включить http://

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

Главное предостережение, которое следует учитывать при использовании ссылки без протоколов, заключается в том, что он не будет работать на страницах, загружаемых через файл:///(т.е. страницы HTML, которые вы загружаете непосредственно с диска в браузер). Поэтому обязательно включите http-протокол в URL-адрес, если вы вообще не работаете с веб-сервером, но не беспокойтесь о том, чтобы опустить его в противном случае.

Поделиться
  • 0
    Вау, спасибо за быстрый ответ - мой пост едва успел за 5 минут. Я попробовал ваше предложение и смог заставить его работать в Internet Explorer, но не по какой-то причине в Chrome.
  • 0
    Не уверен, почему это было понижено; это проблема, с которой я тоже столкнулся (и мог бы быть проблемой здесь, но не могу быть уверен без дополнительной информации). Это потому, что в противном случае file: // выбирается в качестве протокола при локальном запуске
Показать ещё 11 комментариев
0

Вам не хватает таблицы стилей 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>

Обратите внимание на последний (который технически должен быть вторым, но это легче заметить)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню