Question

我遇到了一些问题，在我的网站桌面版本上，我为每个项目都有悬停状态。对于移动而言，这些显然不起作用，因此我需要链接在项目本身。当我把链接放进去时，它们似乎无法正常工作。有人可以帮忙吗？

非常感谢。

HTML：

<div class="projectswrap">
    <div class="project project1"><a href="project1.html">
        <div class="project-hover project-hover1"><h2 class="item-title">Rebrand: Thairapy Hair & Beauty</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project2"><a href="project2.html">
        <div class="project-hover project-hover2"><h2 class="item-title">Gain Theory: Brand and Identity</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project3"><a href="project3.html">
        <div class="project-hover project-hover3"><h2 class="item-title">Information Design</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
    <div class="project project4"><a href="project4.html">
        <div class="project-hover project-hover4"><h2 class="item-title">YouGov Competition: "I can't beleaf it"</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
        <div class="project project5"><a href="project5.html">
        <div class="project-hover project-hover5"><h2 class="item-title">Embrace's financial handouts</h2><h3 class="item-cat">blah blah blah</h3></div></a>
    </div>
</div>

CSS：

/*This is the container for portfolio images*/
.projectswrap {
    margin:0 auto;
    background-color:#f7c8c6;
    position:absolute;
    top:100%;
    width:100%
}

.projectswrap .project {
    width:50%;
    padding-bottom:50%;
    margin:0;
    float:left;
    background:#cceaec;
    position:relative
}

.projectswrap .project .project-hover {
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(255,255,255,0.85);
    -webkit-transition:all 5.6s ease;
    -moz-transition:all .6s ease;
    -o-transition:all .6s ease;
    -ms-transition:all .6s ease;
    transition:all .6s ease
}

.projectswrap .project:hover .project-hover {
    display:block
}

.item-title {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    font-size:xx-large;
    font-weight:700
}

.item-cat {
    position:absolute;
    top:50%;
    margin-top:50px;
    width:100%;
    text-align:center;
    font-family:sans-serif;
    font-size:medium;
    font-weight:100
}

Answer 1

.projectswrap .project .project-hover {
display:none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(255,255,255,0.85);
-webkit-transition:all 5.6s ease;
-moz-transition:all .6s ease;
-o-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease
}

.projectswrap .project:hover .project-hover {
display:block
}

我发现了一个问题，你要同时使用.project-hover，它们都设置为display：none;和display：block（你忘记了一个结束标记）

因为.project-hover设置为display：none;你不能重写.project-hover display：block;因为它只会采用您选择的第一个显示参数。如果你希望它在悬停在它上面时显示

.project-hover:hover {
display: block;
}

希望这有帮助！

Answer 2

因为你没有悬停时包裹了display:none;的元素，因此<a>为空，因此它的宽度和高度为0，你可以在这个<a>标签中包装父div或在不悬停时通过css给a一些宽度和高度

<div class="projectswrap">
  <a href="project1.html">
    <div class="project project1">
      <div class="project-hover project-hover1">
        <h2 class="item-title">Rebrand: Thairapy Hair & Beauty</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project2.html">
    <div class="project project2">
      <div class="project-hover project-hover2">
        <h2 class="item-title">Gain Theory: Brand and Identity</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project3.html">
    <div class="project project3">
        <div class="project-hover project-hover3">
          <h2 class="item-title">Information Design</h2>
          <h3 class="item-cat">blah blah blah</h3>
        </div>
    </div>
  </a>
  <a href="project4.html">
    <div class="project project4">
      <div class="project-hover project-hover4">
        <h2 class="item-title">YouGov Competition: "I can't beleaf it"</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
  <a href="project5.html">
    <div class="project project5">
      <div class="project-hover project-hover5">
        <h2 class="item-title">Embrace's financial handouts</h2>
        <h3 class="item-cat">blah blah blah</h3>
      </div>
    </div>
  </a>
</div>

移动设备上的超链接页面

2 个答案: