有没有一种简单的方法可以使用相应的 img 悬停 jquery 来定位这些 h2 中的每一个

Question

我有六张图像，悬停时它们淡出一个静态引用并将其替换为图像引用。

报价位于所有图像下方的一行中。

有没有一种简单的方法来定位 img 进行报价？这就是我到目前为止所拥有的

     div class="top-icons">
  <div class="span2 first">
    <a href="http://19610.hs-sites.com/inbound-marketing">
        <img src="http://cdn2.hubspot.net/hub/19610/file-511184919-png/img/inbound-icon.png?t=1392133012000" alt="Inbound Marketing" />
      </a>
  </div>
  <div class="span2 2nd">
    <a href="http://19610.hs-sites.com/web-design-optimization">
        <img src="http://cdn2.hubspot.net/hub/19610/file-511189334-png/img/webdesign-icon.png?t=1392133011000" alt="Web Site Design and Development" />
    </a>
  </div>
  <div class="span2 3rd">
    <a href="http://19610.hs-sites.com/search-engine-optimization">
        <img src="http://cdn2.hubspot.net/hub/19610/file-517790482-png/img/seo-icon.png?t=1392133014000" alt="Search Engine Optimization" />
    </a>
  </div>
</div>
    <div class="clear"></div>
    <div class="quotes">
        <h2 class="main">Quote Affiated with Each Image</h2>
        <h2 class="one">Inbound Marketing</h2>
        <h2 class="two">Web Design and Development</h2>
    </div>

Jquery 必须有一种更简单、更有效的方法，我也会在悬停器上获取重复的文本。

$('.first').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.one').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.one').fadeOut('slow', function() {
            $('.quotes').find('.main').fadeIn('slow');
        })
    }
);
$('.2nd').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.two').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.two').fadeOut('slow', function() {
            $('.quotes').find('.main').fadeIn('slow');
        })
    }
);
$('.3rd').hover(
    function() {
        $('.quotes').find('.main').fadeOut('slow', function() {
            $('.quotes').find('.three').fadeIn('slow');
        })
    },
    function() {
        $('.quotes').find('.one').fadeOut('slow', function() {
            $('.quotes').find('.three').fadeIn('slow');
        })
    }
);

小提琴来了 http://jsfiddle.net/KzZQU/13/

Answer 1

这里有一些东西可以适用于你当前的 HTML。

Javascript：

$('.span2').hover(function() {
    var i = $('.span2').index(this),
        quote = $('.quotes h2').not('.main').get(i);
    $('.main').hide();
    $(quote).stop().fadeIn();     
}, function() {
    $('.quotes h2').hide();
    $('.main').stop().fadeIn();
});

示例：http://jsfiddle.net/95Zkw/

尽管像其他人建议的那样具有自定义属性是一个更整洁的解决方案。

Answer 2

在主div 上使用自定义属性来指定要显示的报价的类：

<div class="top-icons">
  <div class="span2 first" quote="one">
  <a href="http://19610.hs-sites.com/inbound-marketing">
    <img src="http://cdn2.hubspot.net/hub/19610/file-511184919-png/img/inbound-icon.png?t=1392133012000" alt="Inbound Marketing" />
  </a>
</div>
<div class="span2 2nd" quote="two">
<a href="http://19610.hs-sites.com/web-design-optimization">
    <img src="http://cdn2.hubspot.net/hub/19610/file-511189334-png/img/webdesign-icon.png?t=1392133011000" alt="Web Site Design and Development" />
</a>
</div>
<div class="span2 3rd" quote="three">
<a href="http://19610.hs-sites.com/search-engine-optimization">
    <img src="http://cdn2.hubspot.net/hub/19610/file-517790482-png/img/seo-icon.png?t=1392133014000" alt="Search Engine Optimization" />
</a>
</div>
</div>

然后你只需要一个简单的javascript调用：

$('.span2').hover(
function() {
    var quote = $(this).attr("quote");
    $('.quotes').find('.main').fadeOut('slow', function() {
        $('.quotes').find("."+quote).fadeIn('slow');
    })
},
function() {
    var quote = $(this).attr("quote");
    $('.quotes').find('.'+quote).fadeOut('slow', function() {
        $('.quotes').find('.main').fadeIn('slow');
    })
}
);

这是jsfiddle：http://jsfiddle.net/KzZQU/13/

Answer 3

将

引号文本放在图像标记内（在alt属性或data-anyname属性中）：

<img class="show-quote-on-hover" src="http://cdn2.hubspot.net/hub/19610/file-511184919-png/img/inbound-icon.png?t=1392133012000" alt="Inbound Marketing" data-quote="Inbound Marketing"/>
<div id="quotes"></div>

根据需要编写尽可能多的图像...将<div id="quotes">留空。然后像这样写一些jQuery：

$('.show-quote-on-hover').on('mouseenter',function(){
  var quote = $('<div style="display:none;">' + $(this).data('quote') + '</div>');
  $('#quotes').prepend(quote);
  quote.show(1000);
});

在此示例中，引用文本将取自data-quote属性。要从alt属性中提取它，应使用属性$(this).attr('alt')。


小提琴：http://jsfiddle.net/y3U83/2/

随意更改show和hide以fadeIn fadeOut...玩得愉快！

...但是，如果您不喜欢这种"历史提要效果"，请使用empty()
http://jsfiddle.net/y3U83/3/