CODEWITHSUNDEEP
javascriptjqueryhtmlcss
amit gupta
amit gupta

Reputation: 1330

Using CSS class Show and hide child div when hovering

I've got a set of product categories. Each category has some products images . I've created a parent div which has an overflow:hidden CSS value. I want to achieve an mouse hover effect. As soon as you hover over the categories I want to show the related category product images. i tried much but still not get perfect solution Here's a small snippet: here is my 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>

//Script

$(".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;

}

Upvotes: 0

Views: 4043

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You don't have to use an id selector since the $(this).next() refers to the target element.

In your code the problem is the variable id is local to the mouseenter callback, it is undefined in the mouseleve callback

$(".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');
})

Demo: Fiddle

Upvotes: 4

Mohsen Safari
Mohsen Safari

Reputation: 6795

and you can do it with css too:

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;
}

Script:

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

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

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

jsFiddle is here

Upvotes: 2

Related Questions