Question

html代码：

<ul class="tabtitle">
    <li class="tab1">test</li>
    <li class="tab2 tabactive">test2</li> 
    <li class="morelink cdmore"><a href="http://exmaple.com/new.html">more</a></li>
    <li class="morelink ebmore"><a href="http://exmaple.com/new1.html">more</a></li>       
</ul>

如果鼠标悬停在tab1 li上，则会显示cdmore li。如果鼠标悬停在tab2 li上，则cdmore li隐藏并显示ebmore li。

我可以通过以下功能获得效果吗？ $('li.tab1,li.tab2').hover(function(){}

Answer 1

是你想要的吗？

// hide morelink first 
$('.morelink').hide();

$('.tab1').hover(function(){
    $('.morelink.cdmore').show();
    $('.morelink.ebmore').hide(); 
});

$('.tab2').hover(function(){
    $('.morelink.cdmore').hide();
    $('.morelink.ebmore').show(); 
});

Answer 2

<ul class="tabtitle">
    <li class="tab1">test</li>
    <li class="tab2 tabactive">test2</li> 
    <li class="morelink cdmore" style="display:none;"><a href="http://exmaple.com/new.html">more</a></li>
    <li class="morelink ebmore"><a href="http://exmaple.com/new1.html">more</a></li>       
</ul>

$("#tab1").mouseover(function(){
  $(".cdmore").show();
});

$("#tab2").mouseover(function(){
  $(".cdmore").hide();
  $(".ebmore").show();
});

Answer 3

请在此处查看http://jsfiddle.net/CDQ9g/

以下是您可以使用的jQuery代码

$(document).ready(function(){
    $('.cdmore, .ebmore').hide();
    $('li.tab1').hover(function(){$('.cdmore').show();}, function(){$('.cdmore').hide();});              
    $('li.tab2').hover(function(){$('.ebmore').show();}, function(){$('.ebmore').hide();});   
});

如果您希望在mouseout上保持链接可见，请从上面将第二个函数的内容移动到第一个函数中。像这样......

$(document).ready(function(){
    $('.cdmore, .ebmore').hide();
    $('li.tab1').hover(function(){$('.ebmore').hide(); $('.cdmore').show();});              
    $('li.tab2').hover(function(){$('.ebmore').show(); $('.cdmore').hide();});   
});

Answer 4

以下是您可以使用的jQuery + HTML代码：

<script type="text/javascript">
$(document).ready(function() {
    $('.tab1').hover(function() {
        $('.tab1 ul').stop(true, true).slideToggle();
    });
    $('.tab2').hover(function() {
        $('.tab2 ul').stop(true, true).slideToggle();
    });
});
</script>

<ul class="tabtitle">
    <li class="tab1" style="cursor:pointer;">Test 1
        <ul style="display:none;">
            <li class="morelink cdmore"><a href="http://exmaple.com/new.html">More</a></li>
        </ul>
    </li>
    <br />
    <li class="tab2 tabactive" style="cursor:pointer;">Test 2
        <ul style="display:none;">
            <li class="morelink ebmore"><a href="http://exmaple.com/new1.html">More 2</a></li>       
        </ul>
    </li>
</ul>

您可以在此处查看此操作：http://jsfiddle.net/fne8Q/

Answer 5

这是很多变化。对于这样的情况，使用.toggle（）可能很有用，它对我来说更具可读性：http://jsfiddle.net/rkw79/CDQ9g/2/

$('.morelink').hide();

$('.tab1, .tab2').hover(function() {
    $('.cdmore').toggle($(this).hasClass('tab1'));
    $('.ebmore').toggle($(this).hasClass('tab2'));
});

Jquery：制作li替代节目

5 个答案: