jQuery Простое изменение текста на картинке hover

Question

Я пытаюсь создать скрипт для изменения текста при наведении изображения. Это HTML в простой версии:

<section id="#first"> 
    <div class="img-1"></div> 
    <div class="img-2"></div> 
    </section> 

    <section id="#second"> 
    <div class="text-1"></div> 
    <div class="text-2"></div> 
    </section> 

Javascript

jQuery(document).ready(function($){ 
    $('.img-1').hover(
    function(){ $('.text-1').addClass('text-1-active') }, 
    function(){ $('.img-1').addClass('img-1-active') }, 
    function(){ $('.text-2').removeClass('text-2-active') }, 
    function(){ $('.img-2').removeClass('img-2-active') } 
) 
$('.img-2').hover(
    function(){ $('.text-2').addClass('text-2-active') }, 
    function(){ $('.img-2').addClass('img-2-active') }, 
    function(){ $('.img-1').removeClass('img-1-active') }, 
    function(){ $('.text-1').removeClass('text-1-active') } 
) 

});

Невозможно изменить структуру HTML. Классы добавляются, но не удаляются.

FIDDLE

Answer 1

:) на самом деле это все, что вам нужно: DEMO

$("#first [class^=img-]").hover(function() { 
    $('#second .text-'+ this.className.replace(/\D/g,'')).toggle(); 
}); 

---

Если вы хотите переключать классы? Ничего проще: DEMO

$("#first [class^=img-]").hover(function() { 
    $(this).toggleClass("wow"); 
    $('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow"); 
}); 

Для объяснения выше, вы просто не нужно, чтобы узнать номер из наведен элемента и опорного по номеру необходимое .text-N элемента.

Также этот <section id="#first">, что #first is не путь для установки идентификатора в элемент HTML.
Использовать просто <section id="first">

Answer 2

Вы пытаетесь передать четыре отдельные функции обратного вызова, а не один обратный вызов, который выполняет весь необходимый код.

Вот то, что вы хотите:

jQuery(document).ready(function($){ 
     $('.img-1').hover(
      function(){ 
      $('.text-1').addClass('text-1-active'); 
      $('.img-1').addClass('img-1-active'); 
      $('.text-2').removeClass('text-2-active'); 
      $('.img-2').removeClass('img-2-active'); 
      } 
    ) 
    $('.img-2').hover(
     function(){ 
      $('.text-2').addClass('text-2-active'); 
      $('.img-2').addClass('img-2-active'); 
      $('.img-1').removeClass('img-1-active'); 
      $('.text-1').removeClass('text-1-active'); 
     } 
    ) 
}); 

http://jsfiddle.net/w4mLtec8/5/

Answer 3

Вы вручая hover событие списка функций. Просто отправьте его, который делает eveything.

I.E.

jQuery(document).ready(function($) { 
    $('.img-1').hover(
     function() { 
      $('.text-1').addClass('text-1-active'); 
      $('.img-1').addClass('img-1-active'); 
      $('.text-2').removeClass('text-2-active'); 
      $('.img-2').removeClass('img-2-active'); 
     } 
    ); 
    $('.img-2').hover(
     function() { 
      $('.text-2').addClass('text-2-active'); 
      $('.img-2').addClass('img-2-active'); 
      $('.img-1').removeClass('img-1-active'); 
      $('.text-1').removeClass('text-1-active'); 
     } 
    ); 
}); 

Answer 4

первый, вы используете функцию .hover неправильно, он должен принимать только 2 arguments, который для mouseenter и mouseleave. Вы должны использовать его как этот

$("selector").hover(
    function(){ 
     // mouseenter function 
    }, 
    function(){ 
     // mouseleave function 
    } 
}); 

и второй вам не нужно использовать слишком долго class name, чтобы решить, он активен или нет, следовательно, вы можете использовать его, чтобы diferentiate его как этот text-1 active и text-2 active, так что вы может написать это в jQuery

jQuery(document).ready(function($){ 
     $('.img-1').hover(
     function(){ $('.text-1').addClass('active') }, 
     function(){ $('.text-1, .text-2').removeClass('active') } 
    ) 
    $('.img-2').hover(
     function(){ $('.text-2').addClass('active') }, 
     function(){ $('.text-1, .text-2').removeClass('active') } 
    ) 

}); 

и CSS

.text-1, 
.text-2{ 
    display:none; 
} 
.text-1.active, 
.text-2.active{ 
    display:block; 
} 

вот Updated Fiddle с оптимизированным способом его использования.

Answer 5

Насколько я понимаю, вам не нужны классы, чтобы показать и скрыть текст, используйте .show() и .hide(), чтобы позаботиться об этом, в исходном js вы передаете 4 функции для событие наведения, тогда как требуется только 2, один выполняется, когда элемент завис, а второй - когда мышь выходит из элемента, вызывающего остановку.

Вот модифицированные JS, посмотрите на скрипке тоже -

jQuery(document).ready(function($){ 
     $('.img-1').hover(
     function(){ 
      $('.text-1').show(); 
      $('.text-2').hide(); 
     }, 
     function(){ 
      $('.text-1, .text-2').hide(); 
     } 
    ); 
    $('.img-2').hover(
     function(){ 
      $('.text-2').show(); 
      $('.text-1').hide(); 
     }, 
     function(){ 
      $('.text-1, .text-2').hide(); 
     } 
    ); 

}); 

FIDDLE

Я в основном скрываются оба текста на выходе, если вы хотите один текстовый блок, чтобы всегда оставаться видимым Вам может скрыть другой в функции «выход». Вот сценарий для этого - http://jsfiddle.net/w4mLtec8/9/

Answer 6

Я делаю предположение о том, что вы ищете ...но попробовать этот JQuery код:

jQuery(document).ready(function ($) { 
    $('.img-1').mouseover(function() { 
     $('.text-1').addClass('text-1-active'); 
     $('.img-1').addClass('img-1-active') 
    }).mouseout(function() { 
     $('.text-1').removeClass('text-1-active'); 
     $('.img-1').removeClass('img-1-active'); 
    }); 

    $('.img-2').mouseover(function() { 
     $('.text-2').addClass('text-2-active'); 
     $('.img-2').addClass('img-2-active') 
    }).mouseout(function() { 
     $('.text-2').removeClass('text-2-active'); 
     $('.img-2').removeClass('img-2-active'); 
    }); 
}); 

Answer 7

Попробуйте

jQuery(document).ready(function($){ 
$('.img-1').hover(function(){ 
    $('.text-1').toggleClass('text-1-active'); 
    $('.img-1').toggleClass('img-1-active'); 
    $('.text-2').toggleClass('text-2-active'); 
    $('.img-2').toggleClass('img-2-active'); 
}); 
$('.img-2').hover(function(){ 
    $('.text-2').toggleClass('text-2-active'); 
    $('.img-2').toggleClass('img-2-active'); 
    $('.img-1').toggleClass('img-1-active'); 
    $('.text-1').toggleClass('text-1-active'); 
}); 

});

Answer 8

jQuery(document).ready(function($){ 
     $('.img-1').hover(
     function(){ 
      $('.text-1').toggleClass('text-1-active'); 
      $('.img-1').toggleClass('img-1-active'); 

     } 
    ) 
    $('.img-2').hover(
     function(){ 
      $('.text-2').toggleClass('text-2-active'); 
      $('.img-2').toggleClass('img-2-active'); 
     } 
    ) 

}); 

http://jsfiddle.net/w4mLtec8/10/

Answer 9

Если я понимаю, что нужно делать, сам подход, используемый для решения проблемы, может быть лучше. В принципе, используйте CSS в ваших интересах. Здесь я сократил количество раз, когда мы вызываем JQuery, потратив немного времени на настройку HTML и CSS.

1. Тэг соответствующий текст DIV с номером
2. Поместите один и тот же номер в атрибуте данных, так что элемент парить знает, какой текст он связан с

3. Я считаю, что намерение состоит в том, чтобы иметь один текст зависать активны одновременно, поэтому мы можем просто удалить все «активные». Естественно, мы ограничили бы селектор здесь, чтобы вытащить только текст, но вы получите эту идею.

   //Javascript Code 
   
   $('.img').hover(function() { 
        var name = $(this).attr('data-name'); 
        $('.text').removeClass('active'); 
        $('.text[data-name="'+name+'"]').addClass('active'); 
   }); 
   

http://jsfiddle.net/LkL9uo0k/1/