鏈接到圖像時請參見鏈接

因此，我在我的網站上創建了可點擊的郵件圖標。但問題是圖標是可點擊的，但我可以看到旁邊的鏈接，有誰知道爲什麼它仍然顯示圖標旁邊的鏈接？我對HTML和CSS相當陌生，所以我很抱歉，如果我的代碼很混亂。鏈接到圖像時請參見鏈接

this is what I mean

HTML代碼

<div id="social"> 
    <div id="images"> 
     <span class="twitter"> 
      <a href="https://www.twitter.com/powerjaxx" target="_blank"><img src="img/Twitter_Social_Icon_Blue.png" alt="twitter" width="48" height="48"/></a> 
     </span> 
     <span class="twitch"> 
      <a href="https://twitch.tv/powerjaxx" target="_blank"><img src="img/Glitch_Purple_RGB.png" alt="twitch" width="48" height="48"/></a> 
     </span> 
     <span class="email"> 
      <a href="mailto:[email protected]?subject=Contact" target="_blank"><img src="img/email-48.png" alt="email" width="48" height="48"/> </a> 
     </span> 
     <span class="github"> 
      <a href="https://github.com/PowerJaxx" target="_blank"><img src="img/GitHub-Mark-48px.png" alt="GitHub" width="48" height="48"/></a> 
     </span> 
    </div> 
</div>

CSS代碼：

.social { 
    width: 100%; 
    margin-top: 50px; 

} 

#social { 
    font-family: 'robonto', sans-serif; 
    text-align: center; 
    font-size: 20px; 
    font-size: 1.9vw; 
    letter-spacing: 5px; 
    color: #FFFCFC; 
    margin-bottom: 0px; 
} 


#images { 
    text-align: center; 
} 

.twitch { 
    margin-right: 1vw; 
    margin-left: 1vw; 
} 

.twitter { 
    margin-right: 1vw; 
    margin-left: 1vw; 
} 

.email { 
    margin-right: 1vw; 
    margin-left: 1vw; 
} 

.github { 
    margin-right: 1vw; 
    margin-left: 1vw; 
}

在此先感謝

來源

2017-04-06 powerjax

這很有趣。我從來沒有見過這種事。

您的錨標籤中有一個空格。它是「電子郵件」範圍標記中的定位標記。

試試這個：

.social { 
 
width: 100%; 
 
margin-top: 50px; 
 

 
} 
 

 
#social { 
 
font-family: 'robonto', sans-serif; 
 
text-align: center; 
 
font-size: 20px; 
 
font-size: 1.9vw; 
 
letter-spacing: 5px; 
 
color: #FFFCFC; 
 
margin-bottom: 0px; 
 
} 
 

 

 
#images { 
 
text-align: center; 
 
} 
 

 
.twitch { 
 

 
margin-right: 1vw; 
 
margin-left: 1vw; 
 
} 
 

 
.twitter { 
 

 
margin-right: 1vw; 
 
margin-left: 1vw; 
 
} 
 

 
.email { 
 

 
margin-right: 1vw; 
 
margin-left: 1vw; 
 
} 
 

 
.github { 
 

 
margin-right: 1vw; 
 
margin-left: 1vw; 
 
}

<div id="social"> 
 
    <div id="images"> 
 
<span class="twitter"> 
 
<a href="https://www.twitter.com/powerjaxx" target="_blank"><img src="img/Twitter_Social_Icon_Blue.png" alt="twitter" width="48" height="48"/></a> 
 
</span> 
 
    <span class="twitch"> 
 
    <a href="https://twitch.tv/powerjaxx" target="_blank"><img src="img/Glitch_Purple_RGB.png" alt="twitch" width="48" height="48"/></a> 
 
    </span> 
 
    <span class="email"> 
 
    <a href="mailto:[email protected]?subject=Contact" target="_blank"><img src="img/email-48.png" alt="email" width="48" height="48"/></a> 
 
    </span> 
 
    <span class="github"><a href="https://github.com/PowerJaxx" target="_blank"><img src="img/GitHub-Mark-48px.png" alt="GitHub" width="48" height="48"/></a> 
 
    </span> 
 
    </div> 
 
    </div>

來源

2017-04-06 12:46:18

非常感謝您！ – powerjax

它正在發生，因爲瀏覽器呈現默認樣式的標籤刪除了這一行添加該類

a{ 
    text-decoration:none; 
} 
a:hover{ 
    text-decoration:none; 
}

來源

2017-04-06 12:47:01

您需要將其添加到css中

.github a { text-decoration:none; }

讓每一個錨標記相同

來源

2017-04-06 12:47:13

你想刪除應用於錨鏈接下劃線：

#images a { 
    text-decoration: none; 
}

另外：你在你的錨標記，它創建的空白空間與下劃線。

來源

2017-04-06 12:47:28

你可以在你的CSS只添加一行。

<Style> 
a{ 
    text-decoration:none; 
    } 
a:hover{ 
    text-decoration:none; 
    } 
</style>

來源

2017-04-06 12:51:17 Chirag

鏈接到圖像時請參見鏈接

回答

相關問題