Question

我有一个我在这里设置的JSFiddle，它是一个盒子网格。在每个盒子上我想要包含一些带有一些文本的悬停状态。（每个框中有不同的文字）我觉得我写过：project1,2,3 ......等等，必须有简写版本。我是悬停状态的新手，这也是最好的方法吗？

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;

}

Answer 1

首先，您没有正确使用类。 Class表示具有相同行为/样式的元素组，因此为每个元素创建唯一类没有多大意义。因此，最好使用常见的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>

在许多DIV上悬停状态的更快捷方式

1 个答案: