javascript - hide, show using jquery -
i show , hide section landing on div second screen when hover 1 section want hide , show here's i've done lately. have tried lot of things 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(); }); });
$(".section-left").mouseenter(function(){ $(".section-left").hide(); }); $(".section-left").mouseleave(function(){ $(".section-left").show(); });
this might help.
Comments
Post a Comment