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

要解释上述内容，您只需要找到hovered元素的 number 和引用所需的.text- N 元素。< / p>

此<section id="#first">，#first 不能将ID设置为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事件提供一系列功能。只需发送一个即可发送的内容。

即

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的{{1}}。你应该像这样使用它

mouseleave

第二，你不需要使用太长$("selector").hover( function(){ // mouseenter function }, function(){ // mouseleave function } });来判断它是否有效，因此你可以使用它来区分它class name和{{} {1}}，所以你可以在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') }
    )

});

这里是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有利于您。在这里，我通过花一点时间来设置HTML和CSS，减少了我们调用JQuery的次数。

使用数字
在数据属性中输入相同的数字，以便悬停的项目知道与

我认为目的是让一个文本悬停一次，因此我们可以简单地删除所有“活动”＃。当然，我们在这里限制选择器只能拉动文本悬停，但你明白了。

//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/

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

9 个答案: