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

这是对你有用的小提琴：

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

Answer 2

这不是最好的示例，但我希望它能有所帮助。您也可以使用list

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