リスト形式のリンクで、ホバーすると背景色などを変えるCSSを組んでSafariで見てみると、
ホバーしたあとに余計な線がでてくるバグっぽい現象がでたのでその対策をメモです。
HTML
- flexboxでliを横並びにする
- 背景色や文字色の切り替え設定はaタグで行うようにする
<navclass="nav"><ulclass="nav__lists"><liclass="nav__list"><ahref=""class="nav__link">リストホバー</a></li><liclass="nav__list"><ahref=""class="nav__link">リストホバー</a></li><liclass="nav__list"><ahref=""class="nav__link">リストホバー</a></li></ul></nav>Sass
.nav{&__lists{border-radius:8px;display:flex;justify-content:space-between;align-items:flex-start;}&__list{display:block;flex-grow:0;flex-shrink:1;flex-basis:auto;text-align:center;margin:0;padding:0;width:100%;&:first-child{.nav__link{border-top-left-radius:8px;border-bottom-left-radius:8px;}}&:last-child{.nav__link{border-top-right-radius:8px;border-bottom-right-radius:8px;}}}&__link{background-color:#000;color:#fff;display:inline-block;padding:14px0;width:100%;&:hover,&.is-current{background-color:#ff0;color:#fff;}}}現象
Chrome
Safari
ホバーした後に線がでてくる
対応
- aタグに
position: relativeとz-index: 1を入れる
修正後のSass
.nav{&__lists{border-radius:8px;display:flex;justify-content:space-between;align-items:flex-start;}&__list{display:block;flex-grow:0;flex-shrink:1;flex-basis:auto;text-align:center;margin:0;padding:0;width:100%;&:first-child{.nav__link{border-top-left-radius:8px;border-bottom-left-radius:8px;}}&:last-child{.nav__link{border-top-right-radius:8px;border-bottom-right-radius:8px;}}}&__link{background-color:#000;color:#fff;display:inline-block;padding:14px0;width:100%;position:relative;/*forsafaribug*/z-index:1;/*forsafaribug*/&:hover,&.is-current{background-color:#ff0;color:#fff;}}}修正後の現象
以上