当父级是 anchor 时,我试图删除 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/
最佳答案
这将去掉你的 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"> </div>
</div>
</div>
</a>
<a href="">
<div class="image_background image_background_right">
<div class="fleximagebox_link">
<div class="main_black_bar"> </div>Sell</div>
</div>
</a>
</div>
</div>
关于css - 当父级是 anchor 时,如何删除 flex 子级上的文本装饰下划线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43242907/