i trying remove text-decoration of flex child when parent anchor. i've tried of following code, , not working @ all. i've created jsfiddle, , on underline shows time , not on hover. in wordpress installation, shows on hover. i'm not sure do! appreciated!
thank ahead of time!!!!
.fleximagebox_link:hover, a.fleximagebox_link:hover, .fleximagebox_link:hover, .fleximagebox_link a:hover, .fleximagebox_link:hover a, .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a, .image_background:hover, .image_background.fleximagebox_link a:hover, .image_background.fleximagebox_link:hover { text-decoration: none!important; } here jsfiddle explains i'm talking about: https://jsfiddle.net/clare12345/th60mde3/2/
this rid of underline in fiddle .flexbox_images { text-decoration: none; }
as why it's on website, can guess if don't include code or link site. might try changing line .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }
.flexbox_images { 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 { -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>
Comments
Post a Comment