Наведите указатель мыши на div div div

Question

Я создаю что-то вроде этого. Когда я нахожу кнопки, верхний контент будет меняться, но у каждой кнопки будет разный контент.

Но я не могу видеть содержимое при наведении его :(

Кто-нибудь знает, как это исправить? Или есть JQuery исправить?

Заранее спасибо

#service-content { 
 
    display: none; 
 
    opacity: 1; 
 
    height: 200px; 
 
\t -webkit-animation: flash 1.5s; 
 
\t animation: flash 1.5s; 
 
} 
 

 
@-webkit-keyframes flash { 
 
\t 0% { 
 
\t \t opacity: .4; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
} 
 
@keyframes flash { 
 
\t 0% { 
 
\t \t opacity: .4; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
} 
 

 
#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; 
 
\t -webkit-animation: flash 1.5s; 
 
\t animation: flash 1.5s; 
 
} 
 

 

 
#slider-buttons .span4 { 
 
    width: 383px; 
 
    float:left; 
 
    height:50px; 
 
} 
 

 
#slider-buttons .image-content { 
 
\t 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>       \t \t 
 

 
<div id="slider-buttons" class="span12"> \t 
 

 

 

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

и каждый большой части, которая будет показана должна иметь уникальный идентификатор с номером, совпадающим с параметром вы ввели для 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(); 
});