悬停div另一个div出现在顶部
艾丽莎·雷耶斯（Alyssa Reyes）
我正在创建这样的东西。当我将鼠标悬停在按钮上方时，内容会改变，但是每个按钮都有不同的内容。
但是当我将其悬停时，我看不到内容:(
有人知道如何解决吗？还是有任何jQuery修复？
提前致谢
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div> 马吉德·萨德尔（Majid Sadr）
可以使用JQuery完成。
首先，应该悬停的每个部分都必须具有一个onmouseover属性，该属性的第一个参数应该是唯一编号。像这样：
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
并且将要显示的每个主要部分都应具有唯一的ID，该ID的编号应与您为应该悬停的div输入的参数相同。像这样：
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
这是该代码的JQuery代码：
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
观点： #box_for_show div {display: none;}
这是适合您的小提琴：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
限制DIV出现在另一个特定大小的DIV中
- 2
使特定的div出现在另一个div之前
- 3
CSS：Div出现在另一个下方
- 4
使div仅出现在另一个的活动状态
- 5
如何使div颜色出现在另一个颜色的前面？
- 6
div出现在另一个绝对位置的div之后，而不是在下面
- 7
给定z索引后，图像未出现在另一个图像的顶部
- 8
悬停一个div使另一个div出现
- 9
如何使第二个浮动div出现在第一个浮动div的顶部？
- 10
为什么尽管使用了“ insertSubview：belowSubview：”，但我的视图仍出现在另一个视图的顶部？
- 11
为什么尽管使用了“ insertSubview：belowSubview：”，但我的视图仍出现在另一个视图的顶部？
- 12
当我使用另一个应用程序时，Android Activity 出现在顶部
- 13
悬停在另一个div上时如何使div出现
- 14
将DIV浮动在另一个DIV的顶部
- 15
使一个VC出现在另一个VC内
- 16
如何在Windows窗体上提出一个元素，使其出现在另一个元素的顶部
- 17
点击时出现的jQuery出现在html中的另一个元素
- 18
将div与另一个偏移顶部对齐
- 19
使p出现在div悬停上
- 20
单击 Div 使另一个 Div 出现
- 21
jQuery悬停并隐藏另一个div
- 22
李悬停时显示另一个div
- 23
在悬停时显示另一个 div
- 24
sass：悬停另一个div时影响另一个元素
- 25
计算列表中出现在另一个列表中的元素
- 26
选择“命令”，其中“用户标识”未出现在另一个表中
- 27
如何从出现在另一个表中的表中获取值
- 28
如何避免MGT组件出现在另一个组件后面
- 29
django过滤器，如果对象出现在另一个表中
我来说两句