懸停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，該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

這不是最好的例子，但我希望它會有所幫助。 您也可以使用清單

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