Вызов функции для элемента (не имеющего уникального идентификатора) при наведении курсора

При наведении указателя мыши на общие элементы того же типа я хочу выполнить для этих элементов функцию, которая будет выполнять анимацию. Однако, поскольку эти элементы не имеют уникальных идентификаторов, я не уверен, как однозначно идентифицировать их в JavaScript. Есть ли способ использовать для этого ключевое слово this? Я не хочу давать им все уникальные идентификаторы, потому что одного и того же элемента огромное количество, и это кажется избыточным. Любая помощь будет принята с благодарностью.

Вот код, с которым я играл, чтобы попытаться заставить это работать. Желательно более простой код или лучше использовать базовый javascript.

$(document).ready(function(){
  $("span").hover(function(){
    this.color = red;
  });
});

Что именно вы хотите, чтобы произошло при наведении курсора? Возможно, это можно сделать только с помощью CSS.

Cata John 10.09.2018 08:28

Я так не думаю, я хочу, чтобы элементы выполняли анимацию, но я хочу, чтобы анимация продолжалась, даже если человек перестает зависать.

user9696370 10.09.2018 08:36
0
2
66
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

red - это не переменная, это строка. Итак, вам нужно использовать 'red':

Чтобы установить цвет с помощью JavaScript, вы должны использовать свойство style:

$(document).ready(function(){
  $("span").hover(function(){
    this.style.color = 'red';
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

ИЛИ: Использование jQuery, использование .css()

$(document).ready(function(){
  $("span").hover(function(){
    $(this).css({color: 'red'});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

Вы можете использовать класс в качестве селектора

присвоить один и тот же класс всем элементам <span>

Попробуйте подписаться

    $('.hoverTest').hover(function(){
        $(this).css("color", "red");
        }, function(){
        $(this).css("color", "");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>

Обратитесь к JQuery Hover () для более подробной информации.

Другие вопросы по теме