jQuery图像悬停时的简单文本更改

：）实际上这就是您所需要的：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是，而不是为HTML元素设置ID的方式
简单使用<section id="first">

您试图传递四个单独的回调函数，而不是一个执行所有必要代码的回调函数。

以下是您想要的：

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/

首先，您错误地使用了.hover函数，它应该只接受用于mouseenter和mouseleave的2 arguments。你应该像这个一样使用它

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

第二，你不需要用太长的class name来决定它是否活动，因此你可以用它来区分它，比如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;
}

这是更新的Fiddle和优化的使用方法。

我假设你在寻找什么。。。但是试试这个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');
    });
});

您正在向hover事件提供函数列表。只要发送一个做任何事情的。

即

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');
        }
    );
});

试试这个

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');
});

})；

如果我了解要做什么，那么用于解决问题的方法本身可能会更好。基本上，使用CSS对您有利。在这里，我花了一些时间来设置HTML和CSS，从而减少了调用JQuery的次数。

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/

据我所知，您不需要类来显示和隐藏文本，使用.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/