尝试制作图标图像链接时删除像素工件链接

Question

我正在尝试制作鼠标悬停时会改变颜色的图标，并 link 单击新选项卡。我的代码做得很好，但是页面上的其他地方（不是我想要的地方）有这些奇怪的“-”像素，并且还会更改图标的颜色并在单击时转到新选项卡。 如何删除这些残留的破折号像素 link？或者，是否有 different/better 方法来制作这些图标图像 links?

这里是 HTML 的问题：

<html>
  <head>
    <link rel ="stylesheet" href="stackO.css">
  </head>
  <body>
  <div class = "webParent">
    <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB"
      src = "ImagesWebsite\github2.png" alt = "github" width = "70" height = "70"/>
      <img class = "imageWEB2" 
      src = "ImagesWebsite\github1.png" alt = "github2" width = "70" height = "70"/>
    </a>
  </div>
  <div class = "webParent2">
    <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB3"
      src = "ImagesWebsite\play1.png" alt = "play2" width = "70" height = "70"/>
      <img class = "imageWEB4" 
      src = "ImagesWebsite\play2.png" alt = "play1" width = "70" height = "70"/>
    </a>
  </div>
  </body>
</html>

这里是 CSS 的问题：

  .webParent2 {
    display:contents;
  }
  .webParent2:hover .imageWEB4{
    visibility: hidden;
  }
  .imageWEB3 {
    position: relative; 
    top: 200px;
    left: 74px;
  }
  .imageWEB4 {
    position:relative; 
    top: 200px;
  }
  .webParent {
    display:contents;
  }
  .webParent:hover .imageWEB2{
    visibility: hidden;
  }
  .imageWEB {
    position:relative; 
    top: 200px;
    left: 74px;
  }
  .imageWEB2 {
    position:relative; 
    top: 200px;
  }

下面是上述问题的动图。我想删除顶部的那些 link。

Answer 1

下划线是因为您拥有的 a 标签的默认下划线。您可以通过在您的链接上输入 text-decoration:none 来删除它，这样该行就会消失。如下图。让我知道

.webParent2, .wenParent {
    display:contents;
  }
  .webParent2:hover .imageWEB4{
    visibility: hidden;
  
  }
 

  

  .webParent:hover .imageWEB2{
    visibility: hidden;
  }
  
  .imageWEB {
     position:absolute;  
    top: 200px;
    left: 74px;
  }
  
  .imageWEB2 {
    position:absolute; 
    top: 200px;
    left: 74px;
  }
  
  
.imageWEB3 {
     position:absolute; 
    top: 200px;
    left: 148px;
   
  }
  .imageWEB4 {
     position:absolute; 
    top: 200px;
    left: 148px;
  }


a:-webkit-any-link {text-decoration: none;}

<html>
  <head>
    <link rel ="stylesheet" href="stackO.css">
  </head>
  <body>

  <div class = "webParent">
    <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB"
      src = "https://www.clipartmax.com/png/middle/351-3511429_sample-inspection-report-lake-ozark-mo-inspection-doctor-sample-icon-png.png" alt = "github" width = "70" height = "70"/>
      </a>
      
      <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB2" 
      src = "https://www.pngall.com/wp-content/uploads/8/Sample.png" alt = "github2" width = "70" height = "70"/>
    </a>
  </div>
  <div class = "webParent2">
    <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB3"
      src = "https://www.clipartmax.com/png/middle/351-3511429_sample-inspection-report-lake-ozark-mo-inspection-doctor-sample-icon-png.png" alt = "play2" width = "70" height = "70"/>
      </a>
      
      <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB4" 
      src = "https://www.pngall.com/wp-content/uploads/8/Sample.png" alt = "play1" width = "70" height = "70"/>
    </a>
    
  </div>

  </body>
</html>

尝试制作图标图像链接时删除像素工件链接

Removing pixel artifact links when trying to make Icon Image links

html

css