Question

所以我在我的网站上制作了一个可点击的邮件图标。但问题是图标是可点击的，但我可以看到它旁边的链接，是否有人知道为什么它仍然显示图标旁边的链接？我对CSS和<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:powerjaxx@gmail.com?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>相当陌生，所以如果我的代码混乱，我很抱歉。

this is what I mean

HTML代码

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

CSS代码：

function generateSine(fq:Number):ByteArray
{
   var bytes:ByteArray = new ByteArray();
   var sample:Number;
   var amp:Number = 1;


 for (var i:int=0; i< 250; i++)
   {
      sample = amp* Math.sin(i  * TWO_PI_OVER_SR *   fq  ) * mod[i];
      bytes.writeFloat(sample);
   }

   for (var i:int=250; i<SAMPLE_SIZE - 250; i++)
   {
      sample = amp* Math.sin(i  * TWO_PI_OVER_SR *   fq  );
      bytes.writeFloat(sample);
   }

   for (var i:int=SAMPLE_SIZE - 250; i<SAMPLE_SIZE; i++)
   {
      sample = amp* Math.sin(i  * TWO_PI_OVER_SR *   fq  ) * (.996 - mod[i]);
      bytes.writeFloat(sample);
   }


   bytes.position = 0;
   return bytes;
}

提前致谢

Answer 1

这很有趣。我从来没有见过这种情况。

您的锚标记中有空格。它是＆＃34; email＆＃34;中的锚标记。 span tag。

试试这个：

＆＃13;

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

＆＃13;

    <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:powerjaxx@gmail.com?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>

＆＃13;

Answer 2

它正在发生，因为浏览器为a标签呈现默认样式以删除该行添加此类

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

Answer 3

您需要在css中添加此内容

.github a { text-decoration:none; }

使每个锚标记相同

Answer 4

您想要删除应用于锚链接的下划线：

#images a {
    text-decoration: none;
}

另外：你的锚标签中有一个空格，它会创建带下划线的空白区域。

Answer 5

您可以在css中添加一行。

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

链接到图像时查看链接

5 个答案: