CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1750573
user1750573

Reputation: 45

Remove div on hover

I have this HTML structure:

 <div class="shadow"></div>
<div id="slide_img">
  <ul class="clearfix">
   <li><img src="themes/company/img/01.png"></li>
   <li><img src="themes/company/img/02.png"></li> 
   <li><img src="themes/company/img/03.png"></li> 
   <li><img src="themes/company/img/04.png"></li> 
   <li><img src="themes/company/img/05.png"></li> 
   <li><img src="themes/company/img/01.png"></li>  
 </ul>
</div>

shadow div on my img and get opacity effect. But when hover on img, remove this shadow div.

shadow CSS:

.shadow {
  background: none no-repeat scroll center center #000000;
  height: 250px;
  left: 0;
  margin: 0;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  width: 1838px;
  z-index:2;
}

How can i do this via jQuery?

Upvotes: 0

Views: 2501

Answers (3)

whytobe
whytobe

Reputation: 163

If you want to temporary hide this use

$(document).ready(function(){
    $('#slide_img img').hover(
        function(){
            // When hover the #slide_img img hide the div.shadow
            $('div.shadow').hide();
        },function(){
            // When out of hover the #slide_img img show the div.shadow
            $('div.shadow').show();
        }
    );
});

ex.on jsFiddle Here

else you want to absolutely remove this use

$('#slide_img img').hover(function(){$('div.shadow').remove();});

Upvotes: 0

YMMD
YMMD

Reputation: 3780

Put your .shadow div inside #slide_img and you can do it with pure CSS:

#slide_img:hover .shadow{
    display: none;
}

Upvotes: 7

adeneo
adeneo

Reputation: 318182

$("#slide_img img").on('mouseenter mouseleave', function() {
    $('.shadow').toggle(e.type=='mouseenter');
});

Upvotes: 0

Related Questions