手機上的超鏈接頁面

我已經遇到了一些問題，在我的網站的桌面版本上，我爲每個項目懸停狀態。對於移動這些顯然不會工作，所以我需要鏈接到項目本身。當我把鏈接放在他們似乎沒有工作。任何人都可以幫忙嗎？手機上的超鏈接頁面

非常感謝。

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 
}

來源

2015-08-31 Clarke Cribb

你能請把它添加到撥弄它會很容易解決您的問題 – chamath

我做了一個jfsiddle：https://jsfiddle.net/azez4Lg5/ @OP，你的問題是不明確的。「不工作」是什麼意思？ – mik01aj

嘗試將「onclick =」「'添加到懸停元素 – mplungjan

.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; 
}

希望這會有所幫助！

來源

2015-08-31 13:34:27

其因爲你包裹具有display:none;當沒有懸停，因此<a>是空的，因此其具有的寬度和高度0元件，可以包父div在這個<a>標籤或給一些寬度和高度通過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>

來源

2015-08-31 09:28:47

手機上的超鏈接頁面

回答

相關問題