使用CSS类在悬停时显示和隐藏子div

Question

我有一组产品类别。每个类别都有一些产品图像。我创建了一个具有溢出的父div：隐藏的CSS值。我想实现鼠标悬停效果。只要将鼠标悬停在类别上，我想显示相关类别产品图像。我试过很多，但仍然没有得到完美的解决方案在这里是一个小片段： 这里是我的Fiddle Demo

<div class="menu" id="1" style="width:200px;"> 
       <a href="#">category 1</a> 
      </div> 
<div class="flyout hidden" id="12">&nbsp; 
<div class="list"> 
    <ul> 
    <li><span class="box">1</span></li> 
    <li><span class="box">2</span></li> 
    <li><span class="box">3</span></li> 
    <li><span class="box">4</span></li> 
    <li><span class="box">5</span></li> 
    <li><span class="box">6</span></li> 
    <li><span class="box">7</span></li> 
    <li><span class="box">8</span></li> 
    <li><span class="box">9</span></li> 
    </ul> 
</div> 
<button class="prev">prev</button> 
<button class="more">more</button> 
</div><br><br> 

<div class="menu" id="2" style="width:200px;"> 
       <a href="#">category 2</a> 
      </div> 
<div class="flyout hidden" id="11" >&nbsp; 
<div class="list"> 
    <ul> 
    <li><span class="box">11</span></li> 
    <li><span class="box">12</span></li> 
    <li><span class="box">13</span></li> 
    <li><span class="box">14</span></li> 
    <li><span class="box">15</span></li> 
    <li><span class="box">16</span></li> 
    <li><span class="box">17</span></li> 
    <li><span class="box">18</span></li> 
    <li><span class="box">19</span></li> 
    </ul> 
</div> 
<button class="prev">prev</button> 
<button class="more">more</button> 
</div> 

//脚本

$(".more").click(function(){ 

    $(".list").animate({scrollLeft: "+=330"}, 300, "swing"); 
}); 

$(".prev").click(function(){ 
    $(".list").animate({scrollLeft: "-=330"}, 300, "swing"); 
}); 
$(".menu").hover(function(){ 
    var gal_id =$(this).next().attr('id'); 
    //alert(gal_id); 
    var id='#'+gal_id; 

    $(id).removeClass('hidden'); 
},function(){ 
    $(id).addClass('hidden'); 
}); 

//的CSS

body { 
    margin: 5px; 
} 
.list { 
    overflow: hidden; 
    height:110px; 
width: 353px; 
margin-left: -38px; 
} 
ul { 
    overflow: hidden; 
    width:2000px; 
} 
li { 
    float: left; 
} 
.box { 
    width: 100px; 
    height: 100px; 
    background: #33cccc; 
    margin: 5px; 
    display: block; 
} 

.flyout{ 
position:absolute; 
width:320px; 
height:250px; 
    margin-left:20px; 
background:red; 
overflow: hidden; 
z-index:10000; 

} 

.hidden{ 
visibility: hidden; 

} 

Answer 1

，你可以用CSS做到这一点：

HTML：

<div class="menu" id="1" style="width:200px;"> <a href="#">category 1</a> 
    <div class="flyout" id="12">&nbsp; 
    <div class="list"> 
     <ul> 
     <li><span class="box">1</span></li> 
     <li><span class="box">2</span></li> 
     <li><span class="box">3</span></li> 
     <li><span class="box">4</span></li> 
     <li><span class="box">5</span></li> 
     <li><span class="box">6</span></li> 
     <li><span class="box">7</span></li> 
     <li><span class="box">8</span></li> 
     <li><span class="box">9</span></li> 
     </ul> 
    </div> 
    <button class="prev">prev</button> 
    <button class="more">more</button> 
    </div> 
</div> 
<br> 
</br> 
<div class="menu" id="2" style="width:200px;"> <a href="#">category 2</a> 
    <div class="flyout" id="11" >&nbsp; 
    <div class="list"> 
     <ul> 
     <li><span class="box">11</span></li> 
     <li><span class="box">12</span></li> 
     <li><span class="box">13</span></li> 
     <li><span class="box">14</span></li> 
     <li><span class="box">15</span></li> 
     <li><span class="box">16</span></li> 
     <li><span class="box">17</span></li> 
     <li><span class="box">18</span></li> 
     <li><span class="box">19</span></li> 
     </ul> 
    </div> 
    <button class="prev">prev</button> 
    <button class="more">more</button> 
    </div> 
</div> 

CSS：

body { 
    margin: 5px; 
} 
.list { 
    overflow: hidden; 
    height:110px; 
    width: 353px; 
    margin-left: -38px; 
} 
ul { 
    overflow: hidden; 
    width:2000px; 
} 
li { 
    float: left; 
} 
.box { 
    width: 100px; 
    height: 100px; 
    background: #33cccc; 
    margin: 5px; 
    display: block; 
} 
.flyout { 
    position:absolute; 
    width:320px; 
    height:250px; 
    margin-left:20px; 
    background:red; 
    overflow: hidden; 
    display:none; 
    z-index:10000; 
} 
.hidden { 
    visibility: hidden; 
} 
div.menu:hover div.flyout { 
    display:block; 
} 

脚本：

$(".more").click(function(){ 

    $(".list").animate({scrollLeft: "+=330"}, 300, "swing"); 
}); 

$(".prev").click(function(){ 
    $(".list").animate({scrollLeft: "-=330"}, 300, "swing"); 
}); 

jsFiddle is here

Answer 2

你不必须使用id选择器，因为$(this).next()引用了目标元素。

在你的代码的问题是变量id是本地的mouseenter回调，它在mouseleve回调

$(".menu").hover(function() { 
    var $next = $(this).next(); 
    $next.removeClass('hidden'); 
    clearTimeout($next.data('hovertimer')); 
}, function() { 
    var $next = $(this).next(), timer; 
    timer = setTimeout(function(){ 
     $next.addClass('hidden'); 
    }, 200); 
    $next.data('hovertimer', timer); 
}); 

$('.flyout').hover(function() { 
    clearTimeout($(this).data('hovertimer')); 
}, function() { 
    $(this).addClass('hidden'); 
}) 

演示未定义：Fiddle