css - 行高降低的悬停文本的背景颜色隐藏了部分文本

Question

参见:https://imgur.com/a/jlJqu来自:https://codepen.io/alanvkarlik/pen/eVmXwY

如何保持相同的行高但使文本可见(没有背景颜色覆盖上面的字母？)

.hover_link {
transition: 0.3s;
text-decoration: none;
padding: 0 3px;
}
.hover_link:hover {
background-color: #4b3ed4;
color: #000;
padding: 0px 3px;
text-decoration: none;
}

希望已经足够清楚了，抱歉这是我在这里的第一篇文章

Answer 1

您可以增加line-height 以适应您的文本背景，请参阅文档:https://www.w3schools.com/cssref/pr_dim_line-height.asp

.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  line-height: 40px; //or so
}

body {
  background: #ccc;
}
#wrapper {
  max-width:80%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
#content {
  width:78%;
  max-width:100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top:0px;
  font-size: 4vw;
  line-height: 4vw;
  font-family: 'PT Serif', serif;
  text-align: justify;
  color: #fff;
  }
.hover_img a:hover span {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  line-height: 5.1vw;
}
.hover_link:hover {
  background-color: #4b3ed4;
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  
}

<link href="https://fonts.googleapis.com/css?family=Eczar:600|PT+Serif:b|Raleway" rel="stylesheet">

   <div id="wrapper">
      <p>SELECTED PROJECTS:</p>
        <div id="content">
              <div class="hover_img">
                + <a class="hover_link" href="#">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</a>
                + <a class="hover_link" href="#">agam decore est cu agam decore est cu</a>
                + <a class="hover_link" href="#">mel feugait inimicus id</a>
                + <a class="hover_link" href="#">ex vocibus expetenda eam</a>
                + <a class="hover_link" href="#">Eos ad meis alterum invenire Eos ad meis alterum invenire</a>
            </div><!-- content -->
</div><!-- wrapper -->

编辑:

As you don't want to change the line-height of the element, so you can do it setting a background:linear-gradient and setting some transparent space on it in order to achieve the desired result:

body {
  background: #ccc;
}
#wrapper {
  max-width:80%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 14px;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
#content {
  width:78%;
  max-width:100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top:0px;
  font-size: 4vw;
  line-height: 4vw;
  font-family: 'PT Serif', serif;
  text-align: justify;
  color: #fff;
  }
.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
}
.hover_link:hover {
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,2989d8+20,207cca+80,ffffff+100&0+20,1+21,1+79,0+80,0+100 */
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(41,137,216,0) 20%, rgba(41,137,216,1) 21%, rgba(32,124,202,1) 79%, rgba(32,124,202,0) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(41,137,216,0) 20%,rgba(41,137,216,1) 21%,rgba(32,124,202,1) 79%,rgba(32,124,202,0) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(41,137,216,0) 20%,rgba(41,137,216,1) 21%,rgba(32,124,202,1) 79%,rgba(32,124,202,0) 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  
}

<link href="https://fonts.googleapis.com/css?family=Eczar:600|PT+Serif:b|Raleway" rel="stylesheet">

   <div id="wrapper">
      <p>SELECTED PROJECTS:</p>
        <div id="content">
              <div class="hover_img">
                + <a class="hover_link" href="#">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</a>
                + <a class="hover_link" href="#">agam decore est cu agam decore est cu</a>
                + <a class="hover_link" href="#">mel feugait inimicus id</a>
                + <a class="hover_link" href="#">ex vocibus expetenda eam</a>
                + <a class="hover_link" href="#">Eos ad meis alterum invenire Eos ad meis alterum invenire</a>
            </div><!-- content -->
</div><!-- wrapper -->

要玩这个渐变，您可以使用背景渐变生成器 link .