如何實現DIV複雜DIV（當懸停事件）？

Question

我想實現這樣一個div

我想顯示左側圖像時，懸停它顯示正確的形象。我在CSS新有什麼想法要實現這個：/。誰能幫我 ？由於 （Nike.com的這一形象提供）

Answer 1

你有很多方法可以做到這一點。例如：讓一個div，看起來像第二個作爲常規的DIV，並把它的權利，我們現在看到的，並使其在CSS隱藏這樣

div#implantedDiv: { display:none } 

而在你的JavaScript把這樣的代碼

$(document).ready(function(){ 
    $("#mainDiv").mouseenter(function(){ 
    $("#implantedDiv").css("visibility", "visible"); 
    }); 
}); 

Answer 2

你可以用CSS做：

.product { 
 
    float:left; 
 
    background:rgba(0,0,0,.1); 
 
    min-height:150px; 
 
    margin:10px; 
 
    padding:10px; 
 
    font-family:helvetica; 
 
} 
 

 
.product .details { 
 
    display:none; /* initial state */ 
 
} 
 
.product:hover .details { 
 
    display:block; /* show only on parent's hover */ 
 
}

<div class="product"> 
 
    <div class="general-info">GENERAL INFO</div> 
 
    <div class="details">DETAILS</div> 
 
</div> 
 
<div class="product"> 
 
    <div class="general-info">GENERAL INFO</div> 
 
    <div class="details">DETAILS</div> 
 
</div>