[英]hide, show using jquery
当我将一个要悬停在div上的部分悬停并显示时,我想显示并隐藏该区域在div上作为第二个屏幕,这是我最近所做的。 我已经尝试了很多东西,但是没有任何效果。
<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();
});
});
$(document).ready(function() {
$("#abc").hide();
$('#xyz').click(function() {
$("#abc").show();
$("#xyz").hide();
});
$('#xyz').click(function() {
$("#abc").show();
$("#xyz").hide();
});
});
$(".section-left").mouseenter(function(){
$(".section-left").hide();
});
$(".section-left").mouseleave(function(){
$(".section-left").show();
});
这可能会有所帮助。
主要问题是因为has()
方法返回一个布尔值,然后在您对其调用show()
或hide()
时抛出错误。 而是使用find()
,它将返回一个包含.ha
元素的jQuery对象。 还要注意,您可以在单个hover
事件处理程序中在单独函数中的hide()
/ show()
使用toggle()
方法。 像这样:
$(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>
如果没有,为什么还要使用JavaScript?
HTML:
<div id="hovering">
<div id="disappearing">
</div>
</div>
样式:
#hovering {
width: 200px;
height: 200px;
background-color: red;
}
#disappearing {
width: 100px;
height: 100px;
background-color: green;
}
#hovering:hover #disappearing {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.