在大量DIV上懸停狀態的更快方式

我有一個JSFiddle，我在這裏設置了一個網格框。在每個框中，我想包括一個懸停狀態和一些文本。（每個框中有不同的文本）我覺得我已經寫了：project1,2,3 ...等，當它必須有一個速記版本。我是懸停狀態的新手，最好的辦法是什麼呢？在大量DIV上懸停狀態的更快方式

JSFiddle here

HTML：

<div class="projectswrap"> 
    <div class="project1"> 
     <div class="project1-hover"></div> 
    </div> 
    <div class="project2"> 
     <div class="project12-hover"></div> 
    </div> 
    <div class="project3"> 
     <div class="project3-hover"></div> 
     </div> 
    <div class="project4"> 
     <div class="project4-hover"></div> 
    </div> 
    <div class="project5"> 
     <div class="project5-hover"></div> 
    </div> 
    <div class="project6"> 
     <div class="project6-hover"></div> 
    </div> 
    <div class="project7"> 
     <div class="project7-hover"></div> 
    </div> 
    <div class="project8"> 
     <div class="project8-hover"></div> 
    </div> 
    <div class="project9"> 
     <div class="project9-hover"></div> 
    </div> 
    <div class="project10"> 
     <div class="project10-hover"></div> 
    </div> 
    <div class="project11"> 
     <div class="project11-hover"></div> 
    </div> 
    <div class="project12"> 
     <div class="project12-hover"></div> 
    </div> 
    <div class="project13"> 
     <div class="project13-hover"></div> 
    </div> 
    <div class="project14"> 
     <div class="project14-hover"></div> 
    </div> 
    <div class="project15"> 
     <div class="project15-hover"></div> 
    </div> 
    <div class="project16"> 
     <div class="project16-hover"></div> 
    </div> 
    <div class="project17"> 
     <div class="project17-hover"></div> 
    </div> 
    <div class="project18"> 
     <div class="project18-hover"></div> 
    </div> 
    <div class="project19"> 
     <div class="project19-hover"></div> 
    </div> 
    <div class="project20"> 
     <div class="project20-hover"></div> 
    </div> 
</div>

CSS：

所有的

.projectswrap { 
    width:100%; 
    margin:0 auto; 
} 
.projectswrap div { 
    width:50%; 
    padding-bottom:48%; 
    margin:0; 
    float:left; 
    background:rgb(204,234,236); 
} 
.project1-hover{ 
    position:relative; 
    top:0; 
    left:0; 
    width:50%; 
    height:50%; 
    background-color:rgba(255,255,255,0.85); 
    z-index:2; 

}

來源

2015-08-08 Clarke Cribb

類的目的是，你可以重複使用。爲什麼你給所有元素一個不同的類，當你可以給他們所有相同的？ – putvande

爲什麼不使用'：hover'？ – hjpotter92

首先，您不使用類正常。類表示具有相同行爲/樣式的元素組，因此爲每個元素創建唯一的類是沒有意義的。所以最好使用通用的project和project-hover類。

無論如何。對於懸停互動，你應該使用:hover僞類和顯示.project-hover上:hover：

.projectswrap { 
 
    width:100%; 
 
    margin:0 auto; 
 
} 
 
.projectswrap .project { 
 
    width:48%; 
 
    padding-bottom:48%; 
 
    margin:1%; 
 
    float:left; 
 
    background:rgb(204,234,236); 
 
    position: relative; 
 
} 
 
.projectswrap .project .project-hover { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    background: coral; 
 
} 
 
.projectswrap .project:hover .project-hover { 
 
    display: block; 
 
}

<div class="projectswrap"> 
 
    <div class="project project1"> 
 
     <div class="project-hover project-hover1">Hover text #1</div> 
 
    </div> 
 
    <div class="project project2"> 
 
     <div class="project-hover project-hover2">Hover text #2</div> 
 
    </div> 
 
    <div class="project project3"> 
 
     <div class="project-hover project-hover3">Hover text #3</div> 
 
    </div> 
 
    <div class="project project4"> 
 
     <div class="project-hover project-hover4">Hover text #4</div> 
 
    </div> 
 
</div>

來源

2015-08-08 17:01:40 dfsq

在大量DIV上懸停狀態的更快方式

回答

相關問題