悬停div另一个div显示在顶部

Question

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

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

有人知道如何修复它吗？或者有任何jquery修复？

提前致谢

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;}

这是适合你的小提琴：

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

Answer 2

这不是最好的example，但我希望它有所帮助。您也可以使用列表

$('div.image-caption').hover(function(){
    var nums = $(this).attr('id');
    $('#cont-'+nums).css('display','block');
}, function() {
    $('.cont').hide();
});