javascript - 悬停 div 另一个 div 出现在顶部

Question

我正在创建这样的东西。当我将鼠标悬停在按钮上方时，内容会发生变化，但每个按钮都有不同的内容。

但是悬停时我看不到内容:(

有人知道怎么解决吗？或者是否有任何 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>

Answer 1

这可以使用 JQuery 来完成。

首先，应该悬停的每个部分都必须有一个 onmouseover 属性，该属性的第一个参数应该是一个唯一的数字。像这样:

<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>

并且每个将要显示的主要部分都应该有一个唯一的 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;}

这是适合你的 fiddle :

http://jsfiddle.net/h0puq1Ld/4/