如何在父元素为锚点时移除 flex 子元素的文本装饰下划线？

Question

如何在父元素为锚点时移除 flex 子元素的文本装饰下划线？

3

我正在尝试在父元素是链接时去除flex子元素的文本装饰。我已经尝试了以下所有代码，但没有任何作用。我创建了一个jsFiddle，在那里下划线始终显示，而不是在悬停时显示。在我的WordPress安装中，它只会在悬停时显示。我真的不知道该怎么办！任何帮助都将不胜感激！

提前感谢你的帮助！！！

    .fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover, 
.fleximagebox_link a:hover, .fleximagebox_link:hover a, 
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a, 
a .image_background:hover, .image_background.fleximagebox_link a:hover, 
a .image_background.fleximagebox_link:hover {
text-decoration: none!important; 
}

这里有一个jsFiddle示例，可以解释我所说的内容：https://jsfiddle.net/Clare12345/th60mde3/2/

- Clare12345

更新：这是可行的代码，但Michael Coker在一般情况下是正确的：'.main_box .flexbox_images a:hover { text-decoration: none!important; }' - Clare12345

简而言之，text-decoration: none 样式需要放在父级锚点 a 元素上，而不是子元素上。 - icl7126

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Coker · Accepted Answer

这将消除您的fiddle中下划线：.flexbox_images a { text-decoration: none; } 至于为什么它在您的网站上，如果您不包括代码或站点链接，我们只能猜测。但是您可以尝试将该行更改为.flexbox_images a，.flexbox_images a:hover { text-decoration: none !important; }

.flexbox_images a {
  text-decoration: none;
}

.main_box {
  background: white;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.main_box .flexbox_images {
  color: white;
  width: 100%;
  padding: 0px;
  overflow: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flexbox_images a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.image_background {
  height: 250px;
  margin: 0 auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 101%;
}

.image_background_left {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-end;
  margin-right: -1px;
}

.image_background_right {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(http://pipsum.com/350x240.jpg);
  justify-content: flex-start;
  margin-left: -1px;
}

.fleximagebox_link {
  font-size: 28pt;
  background: rgba(255, 255, 255, 0.85);
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 130px;
}

.image_background_left .fleximagebox_link {
  justify-content: flex-end;
  padding-left: 35px;
}

.image_background_right .fleximagebox_link {
  justify-content: flex-start;
  padding-right: 35px;
}

.image_background_right .fleximagebox_link p {
  font-size: 28pt!important;
  color: #000!important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin-bottom: 0px;
}

.main_black_bar {
  width: 3px;
  background: #000;
  height: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: -1px;
}

.image_background_left .main_black_bar {
  margin-left: 35px;
}

.image_background_right .main_black_bar {
  margin-right: 35px;
}

<div class="main_box">

  <div class="flexbox_images">
    <a href="">
      <div class="image_background image_background_left">
        <div class="fleximagebox_link">Buy
          <div class="main_black_bar">&nbsp;</div>
        </div>
      </div>
    </a>
    <a href="">
      <div class="image_background image_background_right">
        <div class="fleximagebox_link">
          <div class="main_black_bar">&nbsp;</div>Sell</div>
      </div>
    </a>
  </div>

</div>