html - 在移动设备上超链接页面

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;并显示: block (你在这里忘记了结束标记)

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

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

希望这对您有所帮助!