使用jquery隐藏、显示
hide, show using jquery
我想显示和隐藏一个部分,当我悬停在我希望它隐藏的部分上时,它将作为第二个屏幕降落在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对象。另外请注意,您可以在单独的函数中使用hide()
/show()
上的单个hover
事件处理程序中的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;
}
https://jsfiddle.net/ww6rywdd/
相关文章:
- 在jquery中为显示/隐藏设置cookie
- PHP Javascript显示/隐藏按钮不工作
- 打开/关闭按钮以显示/隐藏内容
- 显示隐藏复选框
- 在bootstrap中显示隐藏特定的li
- JQuery上下文菜单显示/隐藏问题
- JQuery在单击时停止显示/隐藏
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 使用 jQuery 切换显示/隐藏
- 显示/隐藏有关模型更改的指令内容
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 显示/隐藏不起作用
- 使用ng-hide根据条件显示/隐藏按钮
- 仅在第一个结果中显示/隐藏MySQL结果函数
- 显示/隐藏http://ftp链接
- 在显示/隐藏中单击时删除的文本
- 是否可以在不重新渲染的情况下显示/隐藏父对象中的元素
- 将页面内容向左移动时显示/隐藏右侧面板
- 显示/隐藏将不会加载