如果父級是錨時，如何刪除flex孩子上的文本修飾下劃線？

Question

我試圖在父代是錨點時刪除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/

Answer 1

這將擺脫下劃線在你的提琴.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>