0

我有一个无序列表，其中包含一些导致悬停时显示的另一个 div 的项目。

html

<div class="dotdiv">
  <ul>
    <li>Item</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

   <div class="info-1"></div>
   <div class="info-2"></div>
   <div class="info-3"></div>
</div>

javascript

$(function(){
$('.dotdiv li').hover(function(){
    $('.info-' + $(this).attr('id').replace('li','')).show();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');

},function(){
    $('.info-' + $(this).attr('id').replace('li','')).hide();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');
});
});

现在，当我将鼠标悬停在项目 1、2 上时，它会显示出来，而当我将鼠标悬停在外面时，项目仍然会完全按照我的意愿停留在那里。但是现在，如果我返回并尝试显示任何项目，则最后一个项目仅可见。所以我猜我需要更新我的脚本，并确保无论您悬停的项目的顺序如何，它都能正常工作。

更新

这是jsfiddle http://fiddle.jshell.net/7QmR5/

4

2 回答 2

1

您可以按如下方式格式化您的元素

HTML

<li id="1">Item</li>
<div id="info-1"></div>

它允许您执行以下操作

$(".dotdiv > ul > li").hover( function( ) {
    $(".dotdiv > div").hide();
    $("#info-" + $(this).attr("id") ).show();
});

在这里提琴

于 2012-11-26T10:53:06.043 回答
1

如果不想修改 html：

$('#pop li').each(function(i, el){
$(this).hover(
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
    },
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();   
    }
)

});

于 2012-11-26T12:54:47.800 回答