Question

基本上我想要的是当我将鼠标悬停在test以显示ddd时，当我将鼠标悬停在test2 show ddd2上时。

但是现在当我将鼠标悬停在test2上时，它显示的是ddd而不是ddd2。

    <div class="ugh">
    <div class="test">test</div>
</div>

    <div class="a">a</div>
<div class="f">    <div class="b">b</div></div>
    <div class="c">c</div>
<div class="dang">
    <div class="ddd">ddd</div>
</div>

<hr>

<div class="ugh">
    <div class="test">test2</div>
</div>



<div class="dang">
    <div class="ddd">ddd2</div>
</div>

对凌乱的CSS感到抱歉

    $('.test').hover(mouseIn,mouseOut);

    function mouseIn() {
        var menuName = $('.ddd:first').show();
          //.....
    }
    function mouseOut() {
        var menuName = $('.ddd:first').hide();
          //.....
    }

var menuName = $('.ddd').hide();

JS FIDDLE DEMO

Answer 1

请参阅this Fiddle。这个JS适合你。

$('.ddd').hide();
$('.test').mouseenter(function(){
    $(this).parent().nextAll('.dang').filter(':first').find('.ddd').show();
});
$('.test').mouseout(function(){
    $(this).parent().nextAll('.dang').filter(':first').find('.ddd').hide();
});

Answer 2

我建议使用data-*属性来指定要显示的元素（应该有id）。

例如......

HTML（例如，修剪）

<div class="ugh">
    <div class="test" data-target="#ddd">test</div>
</div>

<div class="dang">
    <div id="ddd" class="ddd">ddd</div>
</div>

<div class="ugh">
    <div class="test" data-target="#ddd2">test2</div>
</div>

<div class="dang">
    <div id="ddd2" class="ddd">ddd2</div>
</div>

<强> JAVASCRIPT

$('.test').hover(mouseIn, mouseOut);

function mouseIn() {
    var menuName = $($(this).data("target")).show();
}

function mouseOut() {
    var menuName = $('.ddd').hide();
}

var menuName = $('.ddd').hide();

Here is a working example

Answer 3

工作示例

JSFIDDLE

$(document).ready(function() {
 $("#pp").hide();
 $("#kk").hide();    
 $("#t1_id").hover(
  function() {
    $("#pp").toggle();    
});
$("#t2_id").hover(
  function() {
    $("#kk").toggle();    
});
});

将鼠标悬停在变量上，显示下一个/最近/相应的div

3 个答案: