0

При наведении на блок меняется текст. Проблема в том что таких блоков несколько и они с одинаковым классом, если я навожу на один блок то другие тоже срабатывают. Мне посоветовали использовать this, но поиски в интернете мало что дали.

function f_over () {
  $('.view-car-button-text').css("display","none");
  $('.text-move-on').css("display","block");
}

function f_out () {
  $('.view-car-button-text').css("display","block");
  $('.text-move-on').css("display","none");
}
<div class="view-car-button-text" id="view-car-button-text" onmouseover="f_over ();">
  MITSUBISI
</div>
<div class="text-move-on" id="text-move-on" onmouseout="f_out ();">
  <a href="#">ПОДРОБНЕЕ</a>
</div>

Как использовать this что бы сработало только на 1 блок?

2
  • блок text-move-on всегда идет сразу после view-car-button-text? или могут быть варианты?
    – Grundy
    5 ноя 2016 в 21:09
  • Да всегда. Один скрывается а другой становится видимым 5 ноя 2016 в 21:23

1 ответ 1

1

Ваша проблема в том, что на всех элементах висят функции, которые находят все элементы с заданным классом и естественно ко всем применяют свое действие. Чтобы использовать this Вам нужно выбрать все элементы с нужным классом и для этой выборки повесить функцию-обработчик, которая будет использовать this.

$('.view-car-button-text').on('mouseover', function(){
        $(this).css("display","none");
        $(this).next($('.text-move-on')).css("display","block");
      });

  $('.text-move-on').on('mouseout', function(){
    $(this).css("display","none");
    $(this).prev($('.view-car-button-text')).css("display","block");
  });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.