鏈接在使用後消失：css後的屬性

我目前正試圖加快網站的加載時間。當我接受這個項目時，會出現翻轉圖像，這些圖像會使圖像變亮，以略微表示您已經過了'類別'。我知道你可以在css中做到這一點，而不必使用兩個完全相同的圖像（第二個稍微亮一些）。我使用after屬性來添加具有較高z-索引的白色背景，並且具有輕微的不透明度模仿這個想法。在上一個主頁中，這些「類別圖像」是可點擊的，但是在執行：after僞元素後，圖像周圍的鏈接消失了。鏈接在使用後消失：css後的屬性

這是我佈局的一個小片段 4x4 Grid snippet 這裏是塊

.new-hide-on-mobile { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.new-hide-on-mobile:hover:after { 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    background: white; 
 
    opacity: 0.2; 
 
    margin: 0 auto; 
 
}

<div class="new-hide-on-mobile"> 
 
<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"><img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"></a><br></div>

我知道有一些與內容回事之一的代碼：「」 ;財產，但如果我把它拿出來，它不會做我期待的翻轉效果。我是否全部錯了？我應該做其他事嗎？

來源

2017-05-03 Patrick Boucher

這是因爲僞元素覆蓋了鏈接，請嘗試使用'a'的僞元素 – Akshay

如果Internet Explorer不是必須的，請嘗試[亮度過濾器]（https://developer.mozilla.org/en /文檔/網絡/ CSS /過濾器？v =舉例＃亮度（）_ 2）。 –

可以使用Brightness Filter。
它支持所有主流瀏覽器，IE除外。

HTML

<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"> 
    <img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"> 
</a>

CSS

a:hover img { 
    -webkit-filter: brightness(1.1); 
    filter: brightness(1.1); 
}

這裏有一個jsFiddle demo。

來源

2017-05-03 15:41:27

謝謝！我不知道亮度過濾器。使事情變得更容易！ –

這是因爲div的僞元素覆蓋了鏈接。您可以使用錨點的僞元素，以便可以使用可點擊的疊加層。

.new-hide-on-mobile { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.new-hide-on-mobile a:hover:after { 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    background: white; 
 
    opacity: 0.2; 
 
    margin: 0 auto; 
 
}

<div class="new-hide-on-mobile"> 
 
    <a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"><img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"></a> 
 
    <br> 
 
</div>

來源

2017-05-03 15:31:51 Akshay

鏈接在使用後消失：css後的屬性

回答

相關問題