hide, show using jquery

Question

I would like to show and hide a section which is landing over a div as a second screen when i hover one the section i want it to hide and show 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();
    });
});

Have you added class ha to the section? Pls create a fiddle for this. Will be easier to help — VJS
– VJS, Commented May 9, 2016 at 9:30
has() returns a boolean. Presumably you want to use find() instead, although your HTML shown doesn't seem to match up with the JS code you posted — Rory McCrossan
– Rory McCrossan, Commented May 9, 2016 at 9:31
Its simple hover, you don't even need to use jQuery or JavaScript in there. — RaV
– RaV, Commented May 9, 2016 at 9:54

ketan · Accepted Answer · 2016-05-09 09:35:04Z

1

$(document).ready(function() {
$("#abc").hide();

$('#xyz').click(function() {
   $("#abc").show();
   $("#xyz").hide();
});

$('#xyz').click(function() {
    $("#abc").show();
    $("#xyz").hide();
});
});

edited May 9, 2016 at 9:35

ketan

19.4k42 gold badges68 silver badges107 bronze badges

answered May 9, 2016 at 9:31

Dhaval Vansajaliya

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rory McCrossan Over a year ago

How does this help the OP?

Rory McCrossan Over a year ago

But they are not the buttons the OP is using and he clearly already knows about the hide() and show()` methods as he's using them.

Håkan · Accepted Answer · 2016-05-09 10:10:14Z

0

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

This might help.

edited May 9, 2016 at 10:10

answered May 9, 2016 at 9:34

Håkan

1611 silver badge13 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2016-05-09 09:38:33Z

The main problem is because the has() method returns a boolean which is then throwing an error as you call show() or hide() on it. Instead, use find() which will return a jQuery object containing the .ha element. Also note that you can use the toggle() method in a single hover event handler over hide()/show() in separate functions. Something like this:

$(function() {
  $(".section-left").hover(function() {
    $(this).find(".ha").toggle();
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>

RaV · Accepted Answer · 2016-05-09 09:45:05Z

0

Why use JavaScript when you dont have too?

HTML:

<div id="hovering">
<div id="disappearing">

</div>
</div>

Style:

#hovering {
  width: 200px;
  height: 200px;
  background-color: red;
}
#disappearing {
  width: 100px;
  height: 100px;
  background-color: green;
}
#hovering:hover #disappearing {
  display: none;
}

https://jsfiddle.net/ww6rywdd/

answered May 9, 2016 at 9:45

RaV

1,0481 gold badge9 silver badges25 bronze badges

Collectives™ on Stack Overflow

hide, show using jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related