Mohamed Fathy Mohamed Fathy - 6 months ago 17
HTML Question

hide, show using jquery

I would like to show and hide a section during hover in and hover out.
here's what I've done lately. I have tried a lot of things but nothing works.

I would like to show and hide a section during hover in and hover out.
here's what I've done lately. I have tried a lot of things but nothing works.

<div class=" banner">

<div class="section-left">
<section class="ha">
<p> الوافد الجديد</p>
<a href="#"><h6> تسوق الان</h6></a>
</section>

</div>

<div class="section-mid">
<section>

<p> الوافد الجديد</p>
<a href="#"><h6> تسوق الان</h6></a>
</section>
</div>

<div class="section-right">
<section>
<p> الوافد الجديد</p>
<a href="#"><h6> تسوق الان</h6></a>
</section>

</div>


.section-left {
background-image: url("img/Layer-44.jpg");
z-index: 99999;
position: absolute;
display: inline-block;
left: 90px;
width: 309px;
height: 180px;
}
.ha {
background-color:rgba(187,166,153,.6);
width: 100%;
height:100%;
display: none;
}
.section-left p {
text-align: center;
font-family: Droid Arabic Kufi;
color: #fff;
font-size: 18px;
padding-top: 60px;
position: relative;
}
.section-left p:after{
background-image: url("img/lin.png");
display: block;
content: " ";
margin-left: 130px;
margin-top: 15px;
background-color: red;
width: 64px;
height: 1px;
}
.section-left h6{
text-align: center;
font-family: Droid Arabic Kufi;
color: #fff;
font-size: 18px;
position: absolute;
top: 110px;
left: 110px;
}


$(function() {
$(".section-left").hover(function() {
$(this).has(".ha").show();
}, function() {
$(this).has(".ha").hide();
});
});

Answer
$(".section-left").mouseenter(function(){
$(".section-left").hide();
});
$(".section-left").mouseleave(function(){
$(".section-left").show();
});

This might help.

Comments