[英]Using CSS class Show and hide child div when hovering
我有一組產品類別。 每個類別都有一些產品圖片。 我創建了一個具有div:hidden CSS值的父div。 我想實現鼠標懸停效果。 當您將鼠標懸停在類別上時,我想顯示相關類別的產品圖像。 我嘗試了很多,但仍未獲得完美的解決方案這是一個小片段:這是我的小提琴演示
<div class="menu" id="1" style="width:200px;">
<a href="#">category 1</a>
</div>
<div class="flyout hidden" id="12">
<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" >
<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;
}
您不必使用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');
})
演示: 小提琴
而且您也可以使用CSS來做到這一點:
HTML:
<div class="menu" id="1" style="width:200px;"> <a href="#">category 1</a>
<div class="flyout" id="12">
<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" >
<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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.