Me gustaría mostrar y ocultar una sección que está aterrizando sobre un div como una segunda pantalla cuando coloco el cursor sobre la sección que quiero que oculte y muestre lo siguiente: Lo he hecho últimamente. He intentado muchas cosas pero nada funciona.

<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();
    });
});
1
Mohamed Fathy 9 may. 2016 a las 12:26

4 respuestas

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

Esto puede ayudar.

1
Håkan 9 may. 2016 a las 10:10

El problema principal se debe a que el método has() devuelve un valor booleano que arroja un error al llamarlo show() o hide(). En su lugar, use find() que devolverá un objeto jQuery que contiene el elemento .ha. También tenga en cuenta que puede usar el método toggle() en un único controlador de eventos hover sobre hide() / show() en funciones separadas. Algo como esto:

$(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>
0
Rory McCrossan 9 may. 2016 a las 09:38
$(document).ready(function() {
$("#abc").hide();

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

$('#xyz').click(function() {
    $("#abc").show();
    $("#xyz").hide();
});
});
1
ketan 9 may. 2016 a las 09:35

¿Por qué usar JavaScript cuando no lo tienes también?

Html:

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

</div>
</div>

Estilo:

#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/

0
RaV 9 may. 2016 a las 09:45