Псевдокласс :hover и jQuery

@[progeR] · Регистрация: 20.08.2011

Студворк — интернет-сервис помощи студентам

Добрый вечер.
Странная вещь твориться, помогите разобраться.
Итак, есть картинка с таким стилем:

CSS
1
2
3
4
5
6
#shoppingCartImage
{
    background-image: url('shoppingCart.png');
    cursor: pointer;
}
#shoppingCartImage:hover {background-image: url('shoppingCartHover.png');}

Навели на картинку - она условно подсветилась.
Далее, когда я мышкой тыкаю на нею, то срабатывает скрипт:

JavaScript
1
2
3
4
5
6
7
$(document).ready(function ()
    {
        $('#shoppingCartImage').on('click', function()
        {
            $(this).css("background-image", "url('shoppingCartActive.png')");
        });
    });

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

JavaScript
1
2
3
4
onHide: function(content, element)
            {
                $(element).css("background-image", "url('shoppingCart.png')");
            }

Т.е. я возвращаю исходное состояние картинки.
И вот теперь я снова навожу мышь на мою картинку, и она уже не подсвечивается! Куда делась инструкция из стиля: #shoppingCartImage:hover {background-image: url('shoppingCartHover.png');} ? Как снова вернуть подсвечивание?

Donald28 · 21.05.2013, 22:33

а в процессе выполнения подключенного плагина, id рассматриваемого элемента случайно не исчезло?

P.S. у меня дополнительный вопрос, почему возникла мода на такие конструкции:

JavaScript
1
 $('#shoppingCartImage').on('click', function()

почему не использовать просто:

JavaScript
1
 $('#shoppingCartImage').click(function()

@[progeR] · 21.05.2013, 22:45 **[ТС]**

В исходном коде страницы все есть.

Ну, в jQuery пока не знаток -сделал так, как было написано на офф. сайте в статье про .css() =)

zhibirc · 22.05.2013, 01:27

Вместо

JavaScript
1
$().css();

попробуйте

JavaScript
1
$().addClass();

Добавлено через 5 минут

Сообщение от Donald28

почему не использовать просто:

Совершенно согласен.
Но еще хуже, по-моему, будет ситуация, когда программист в коде использует для одних и тех же случаев разные методы и конструкции, только затрудняющие понимание кода. Мне кажется, программист с самого начала дожен вознамериться писать логичный и легкочитаемый код.

Добавлено через 4 минуты
И мне кажется, для оформления лучше использовать все же классы. Понятно, что для сокращения объема кода, для тех элементов, у которых для обеспечения доступа к ним через скррипты указан id, можно и оформление задать через них же. Но в общем случае, по-моему, стоит это разделять.

@Xp-Apache · 22.05.2013, 06:19

Тут всё дело в приоритетах стилей. Так как к элементу может быть применено несколько противоречащих стиля, им был задан следующий приоритет:
1. высший приоритет у встроенного стиля, например <div style="color: white"></div> ничем не перебьёшь;
2. далее следует стиль, применённый к идентификатору, например #someId {color: white};
3. далее следуют классы, псевдоэлементы и прочее.

Метод jQuery .css() создаёт встроенный стиль который имеет высший приоритет. Именно поэтому у Вас перестаёт обрабатывать стиль, заданный в псевдоэлементе :hover.
Для эффекта чекбокса (нажал - выделилось, опять нажал - убралось выделение) я рекомендую использовать метод toggleClass() и на сам класс навешать необходимую стилизацию. Например:

HTML5
1
<div id="el"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#el {
  background-color: white;
}
 
#el:hover {
  background-color: red;
}
 
#el.active {
  background-color: silver;
}
 
#el.active:hover {
  background-color: gray;
}

JavaScript
1
2
3
4
5
$(function() {
  $("#el").click(function() {
    $("this").toggleClass("active");
  });
});

zhibirc · 22.05.2013, 22:00

Сообщение от Xp-Apache

1. высший приоритет у встроенного стиля, например <div style="color: white"></div> ничем не перебьёшь;

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                        $('body').css('background', 'green');});
        </script>
</head>
    <body style="background: black;">
    </body>
</html>

CSS
1
body { background-color: red; }

Фон станет зеленым. Внезапно. ;-)

@Forastero · 22.05.2013, 23:15

Donald28,

Сообщение от Donald28

P.S. у меня дополнительный вопрос, почему возникла мода на такие конструкции:

Мне кажется .on('click', function{}) будет чуточку быстрее, поскольку .click() -это всего лишь обертка для предыдущей функции. Так же как и hover др.

@Xp-Apache · 23.05.2013, 01:33

Сообщение от !i

Фон станет зеленым. Внезапно. ;-)

Ничего внезапного. Изначально <body style="background: black;"></body>, а после использования $("body").css("background", "green") изменяется встроенный стиль элемента: <body style="background: green"></body>. Я же не говорил, что сами встроенные стили элементов нельзя менять. Можно вообще сделать $("body").css("background", "") и фон (в Вашем примере) «внезапно» станет красным, т.к. по сути втроенный стиль будет удалён из DOM-элемента.

@and_y87 · 23.05.2013, 10:07

Xp-Apache, Отличный пример привёл...

[progeR], Как вариант может когда пригодиться...
можно делать такие конструкции:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
  $( element )
    .on( 'click', function() {
      $(this) /* действия*/
    })
    .on( 'change', function() {
      $(this) /* действия */
    })
    .on( 'hover', function() {
      $(this) /* действия */
    })
   .on( 'mouseleave mouseenter', function() {
      $(this) /* действия */
    })
});

Примерчик конструкции)

@[progeR] · 25.05.2013, 22:42 **[ТС]**

Всем спасибо! toggleClass - гениальная вещь.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	21.05.2013, 22:45 [ТС]
	В исходном коде страницы все есть. Ну, в jQuery пока не знаток -сделал так, как было написано на офф. сайте в статье про .css() =) 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	25.05.2013, 22:42 [ТС]
	Всем спасибо! toggleClass - гениальная вещь. 0

Псевдокласс :hover и jQuery

Решение