HTML：div無法點擊（超鏈接）

我目前遇到了一個問題，我無法點擊我爲HTML文件提供的鏈接。我目前正在參加一個需要61-90原子序數週期表的學校項目。HTML：div無法點擊（超鏈接）

我嘗試添加簡單的設計，可以幫助網站提供一個乾淨的外觀，然後我試圖添加一個超鏈接，因此它可能導致另一個網頁，這將給有關特定元素的細節。

我還沒有找到任何解決方案，我可以理解，我還是很新的HTML和瀏覽此網站（嘿嘿），所以你們可以幫助我在這？ 提前致謝！ 下面是我使用的代碼：

HTML和CSS：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    background: chocolate; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 5vw; 
 
    font-size: 2vw; 
 
    margin-right: -4px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: rgba(200, 200, 200, 0.6); 
 
    transition: all 0.4s; 
 
} 
 
div:hover:before { 
 
    background: rgba(200, 200, 200, 0); 
 
}

<div><a href=https://www.google.com/>Nd</a></div> 
 
<div>Pm</div> 
 
<div>Sm</div> 
 
<div>Eu</div> 
 
<div>Gd</div> 
 
<div>Tb</div> 
 
<div>Dy</div> 
 
<div>Ho</div> 
 
<div>Er</div> 
 
<div>Tm</div> 
 
<div>Yb</div> 
 
<div>Lu</div> 
 
<div>Ac</div> 
 
<div>Th</div>

來源

2016-09-23 Joaquin Luis B. Basbacio

，因爲它是層疊before元素後面不能在anchor元素上點擊。

（該before元件是absolute，因此層疊未指定位置的量，a元件上方，所以成爲static位置 - 這對於任何元素的默認）

所以這裏是一個FIX-使它定位元素加入說：

div a { 
position: relative; 
}

現在鏈接將可點擊。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    background: chocolate; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 5vw; 
 
    font-size: 2vw; 
 
    margin-right: -4px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: rgba(200, 200, 200, 0.6); 
 
    transition: all 0.4s; 
 
} 
 
div:hover:before { 
 
    background: rgba(200, 200, 200, 0); 
 
} 
 
div a { 
 
position: relative; 
 
}

<div><a href=https://www.google.com/">Nd</a></div> 
 
<div>Pm</div> 
 
<div>Sm</div> 
 
<div>Eu</div> 
 
<div>Gd</div> 
 
<div>Tb</div> 
 
<div>Dy</div> 
 
<div>Ho</div> 
 
<div>Er</div> 
 
<div>Tm</div> 
 
<div>Yb</div> 
 
<div>Lu</div> 
 
<div>Ac</div> 
 
<div>Th</div>

來源

2016-09-23 09:40:37 kukkuz

它實際上，謝謝！ :) –

你缺少引號「」在你的鏈接 - 是指所提到的鏈接瞭解更多詳情 W3Schools

<div><a href="https://www.google.com/">Nd</a></div>

來源

2016-09-23 09:36:31

沒有什麼似乎已經發生了，感謝你回答，但！ –

只需提供雙引號）和不那麼快閉上你的標籤;）

<a href="https://www.google.com">Nd</a>

如果你想是完美的，提供了一個「目標」屬性。

_self爲當前標籤頁中， _blank新標籤

所以，

<a href="https://www.google.com" target="_blank">Nd</a>

應該是完美;）

來源

2016-09-23 09:36:50

從你的CSS的DIV刪除content規則。行情並不那麼重要，但也加入。

來源

2016-09-23 09:37:54

您可以點擊它，因爲在位置div:before僞元素「絕對」被掩蓋的鏈接，嘗試添加此規則：

div:before { 
    z-index: 10; 
} 

div > a { 
    position: relative; 
    z-index: 11; 
}

在相對位置的鏈接，您可以設置的z-index大於：元素之前，你應該能夠點擊它。

歡呼聲

來源

2016-09-23 09:38:47

此代碼有效！檢查您的語法爲 html標記。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    background: chocolate; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 5vw; 
 
    font-size: 2vw; 
 
    margin-right: -4px; 
 
    position: relative; 
 
} 
 

 
div::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: rgba(200, 200, 200, 0.6); 
 
    transition: all 0.4s; 
 
} 
 
div:hover:before { 
 
    background: rgba(200, 200, 200, 0); 
 
}

<a href="https://www.google.com"><div>Nd</div></a> 
 
<div>Pm</div> 
 
<div>Sm</div> 
 
<div>Eu</div> 
 
<div>Gd</div> 
 
<div>Tb</div> 
 
<div>Dy</div> 
 
<div>Ho</div> 
 
<div>Er</div> 
 
<div>Tm</div> 
 
<div>Yb</div> 
 
<div>Lu</div> 
 
<div>Ac</div> 
 
<div>Th</div>

來源

2016-09-23 09:39:43 MuhammadJ

:before被重疊上<a>標籤

添加position: relativez-index:和1至a

a { 
position: relative; 
    z-index: 1 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    background: chocolate; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 5vw; 
 
    font-size: 2vw; 
 
    margin-right: -4px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: rgba(200, 200, 200, 0.6); 
 
    transition: all 0.4s; 
 
} 
 
div:hover:before { 
 
    background: rgba(200, 200, 200, 0); 
 
} 
 
a { 
 
position: relative; 
 
    z-index: 1 
 
}

<div><a href=https://www.google.com/>Nd</a></div> 
 
<div>Pm</div> 
 
<div>Sm</div> 
 
<div>Eu</div> 
 
<div>Gd</div> 
 
<div>Tb</div> 
 
<div>Dy</div> 
 
<div>Ho</div> 
 
<div>Er</div> 
 
<div>Tm</div> 
 
<div>Yb</div> 
 
<div>Lu</div> 
 
<div>Ac</div> 
 
<div>Th</div>

來源

2016-09-23 09:41:05 Tushar

我終於能夠點擊超鏈接。謝謝！ :) –

只是content: "";從div::before 現在刪除其做工精細

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    background: chocolate; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height: 5vw; 
 
    font-size: 2vw; 
 
    margin-right: -4px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: inherit; 
 
    width: inherit; 
 
    background: rgba(200, 200, 200, 0.6); 
 
    transition: all 0.4s; 
 
} 
 
div:hover:before { 
 
    background: rgba(200, 200, 200, 0); 
 
}

<div><a href="https://www.google.com/" style="z-index:999;">Nd</a></div> 
 
<div>Pm</div> 
 
<div>Sm</div> 
 
<div>Eu</div> 
 
<div>Gd</div> 
 
<div>Tb</div> 
 
<div>Dy</div> 
 
<div>Ho</div> 
 
<div>Er</div> 
 
<div>Tm</div> 
 
<div>Yb</div> 
 
<div>Lu</div> 
 
<div>Ac</div> 
 
<div>Th</div>

來源

2016-09-23 09:45:59

HTML：div無法點擊（超鏈接）

回答

相關問題