为什么我的链接图像之间有一条线

Question

我的链接图像之间有一条细细的水平线，我不确定是什么原因导致了这种情况，或者如何解决这个问题。有任何想法吗？

.hvr-bounce-to-right { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: perspective(1px) translateZ(0); 
 
    transform: perspective(1px) translateZ(0); 
 
    box-shadow: 0 0 1px transparent; 
 
    position: relative; 
 
    -webkit-transition-property: color; 
 
    transition-property: color; 
 
    -webkit-transition-duration: 0.5s; 
 
    transition-duration: 0.5s; 
 
    margin: 20px; 
 
} 
 
.cowalign { 
 
    text-align: center; 
 
} 
 
.cowalign img { 
 
    vertical-align: middle; 
 
    width: 350px; 
 
} 
 
.imgDescription { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 286px; 
 
    color: #fff; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    z-index: 1; 
 
    text-align: center; 
 
    /*remove comment if you want a gradual transition between states 
 
     -webkit-transition: visibility opacity 0.2s; 
 
     */ 
 
} 
 
.bgcolor { 
 
    max-width: 1300px; 
 
    background-color: #E5E5E5; 
 
    margin: auto; 
 
} 
 
.container { 
 
    background-color: #ffffff; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding-right: 3%; 
 
    padding-left: 3%; 
 
    padding-bottom: 50px; 
 
} 
 
.logowordmark img { 
 
    float: left; 
 
    padding-left: 40px; 
 
    padding-top: 40px; 
 
} 
 
#navigation { 
 
    float: right; 
 
    padding-right: 40px; 
 
    padding-top: 40px 
 
} 
 
#navigation li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-left: 20px; 
 
    text-transform: uppercase; 
 
    font-family: "mr-eaves-modern", sans-serif; 
 
    font-size: 12px; 
 
    font-weight: 100; 
 
    letter-spacing: normal; 
 
    color: #999999; 
 
} 
 
.heading { 
 
    clear: both; 
 
    margin: auto; 
 
    max-width: 750px; 
 
    padding-top: 50px; 
 
    margin-bottom: 50px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
} 
 
#ourwork { 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    letter-spacing: 2px; 
 
    margin: auto; 
 
    font-size: 40px; 
 
    line-height: 40px; 
 
} 
 
.titlework { 
 
    font-size: 25px; 
 
    letter-spacing: 2px; 
 
} 
 
.descriptionwork { 
 
    font-size: 12px; 
 
    letter-spacing: 3px; 
 
    color: #21A4B9; 
 
} 
 
#ourwork span { 
 
    color: #21A4B9; 
 
} 
 
#ourworksubtext { 
 
    color: #999999; 
 
} 
 
.hvr-bounce-to-right:hover .imgDescription { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition-delay: 0.2s; 
 
} 
 
.hvr-bounce-to-right:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: #2D2D2D; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transform-origin: 0 50%; 
 
    transform-origin: 0 50%; 
 
    -webkit-transition-property: transform; 
 
    transition-property: transform; 
 
    -webkit-transition-duration: 0.5s; 
 
    transition-duration: 0.5s; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
    opacity: 0.95; 
 
} 
 
.hvr-bounce-to-right:hover, 
 
.hvr-bounce-to-right:focus, 
 
.hvr-bounce-to-right:active { 
 
    color: white; 
 
} 
 
.hvr-bounce-to-right:hover:before, 
 
.hvr-bounce-to-right:focus:before, 
 
.hvr-bounce-to-right:active:before { 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); 
 
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); 
 
}

<div class="cowalign"> 
 

 
    <a href="#"> 
 
    <div class="hvr-bounce-to-right"> 
 
     <div class="imgWrap"> 
 
     <div class="imgDescription"><span class="titlework">Deadeye BBQ</span> 
 
      <br> 
 
      <span class="descriptionwork">Website/Mobile/Poster Design</span> 
 
     </div> 
 
     <img src="images/001-MacBook-Silverlarge.jpg" alt="cow"> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 

 

 
    <a href="#"> 
 
    <div class="hvr-bounce-to-right"> 
 
     <div class="imgWrap"> 
 
     <div class="imgDescription"><span class="titlework">Jellyfish Evening</span> 
 
      <br> 
 
      <span class="descriptionwork"> Poster Design</span> 
 
     </div> 
 
     <img src="images/jellyfishevening.jpg" alt="cow"> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 

 
    <div class="cowalign"> 
 

 

 
    <div class="hvr-bounce-to-right"> 
 
     <div class="imgWrap"> 
 
     <div class="imgDescription"><span class="titlework">Aerial Aid</span> 
 
      <br> 
 
      <span class="descriptionwork"> Logo Design</span> 
 
     </div> 
 
     <img src="images/aalogowork.jpg" alt="cow"> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="hvr-bounce-to-right"> 
 
     <div class="imgWrap"> 
 
     <div class="imgDescription"><span class="titlework">Dead, Dumb Fish</span> 
 
      <br> 
 
      <span class="descriptionwork">Poster Design</span> 
 
     </div> 
 
     <img src="images/fishwork.jpg" alt="cow"> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div> 
 

 
</div>

Answer 1

那是因为你还没有带走了<a>包裹元素的样式。因此显示<a>的默认下划线。该<a><div class="cowalign">后直接

添加类似.cowalign a { text-decoration: none; }在CSS

Answer 2

.cowalign a { 
    text-decoration: none; 
}