как выбрать определенный элемент HTML, который является частью класса, а не все элементы класса для селекторов JQuery

Question

как выбрать определенный элемент HTML, который является частью класса, а не все элементы класса для селекторов JQuery

0

    <script type="text/javascript">
         $(document).ready(function () {
         $(".style1:this").mouseover(function () {
         $(".style1:this").animate({ fontSize: '22px' }, "slow");
         });
         $(".style1:this").mouseout(function () {
         $(".style1:this").animate({ fontSize: '16px' }, "slow");
       });
    });
   </script>

Здесь ".style1" - это класс.... Я хочу, чтобы функция animate работала только над элементом, на котором происходит событие mouseover() и mouseout(). Указанный код явно не работает, но я пытаюсь показать, что я хочу делать.

user3462432 26 март 2014, в 05:20

Источник

Теги:

javascript

jquery

html

2 ответа

0

если то, что вы хотите оживить, это шрифт, и вам не нужно поддерживать старые браузеры, вы всегда можете сделать это напрямую с помощью CSS

.style1 {
  -webkit-transition: font-size .5s ease;
   -moz-transition: font-size .5s ease;
     -o-transition: font-size .5s ease;
        transition: font-size .5s ease;
  font-size: 20px;
}

.style1:hover {
-webkit-transition: font-size .5s ease;
   -moz-transition: font-size .5s ease;
     -o-transition: font-size .5s ease;
        transition: font-size .5s ease;
  font-size: 30px;
}

Нет необходимости в кодировании JavaScript

Вот пример http://plnkr.co/edit/sDGMOczKgFYiqlMQDTvF?p=preview

Jorge Enrique Reyes Salas 26 март 2014, в 19:13

Ещё вопросы

BoltClock · Accepted Answer · 2014-03-26T00-49-00.000Z

this относится к обратному вызову, а не к нему:

$(".style1").mouseover(function () {
  $(this).animate({ fontSize: '22px' }, "slow");
});
$(".style1").mouseout(function () {
  $(this).animate({ fontSize: '16px' }, "slow");
});

Вы также можете использовать цепочку ,mouseout() для .mouseover() чтобы избежать необходимости повторять селектор:

$(".style1").mouseover(function () {
  $(this).animate({ fontSize: '22px' }, "slow");
}).mouseout(function () {
  $(this).animate({ fontSize: '16px' }, "slow");
});

Кроме того, если его нужно применить только к одному элементу класса, который не имеет другого селектора: $(".style1").eq(n).ready(function...