前提・実現したいこと
site name下のmailを背景色を白に、文字色を#7E7E7Eに
更に:hoverすることで白色の実線で囲って背景色を#7E7E7Eに、文字色を白色にしたいです。
発生している問題・エラーメッセージ
maillの背景色と文字色が反映されない。
該当のソースコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>test</title> 6</head> 7<body> 8<fooder class="fooder"> 9 <div class="footer-content-wrapper"> 10 <p>Site name</p> 11 <div class="fooder-maill"><a href="mailto:sample@xxxx.com">mail</a></div> 12 <nav class="site-map"> 13 <ul class="site-map__main-links"> 14 <li><a href="index.html">NAV</a></li> 15 <li><a href="">NAV</a></li> 16 <li><a href="">NAV</a></li> 17 </ul> 18 <ul class="site-map__sab-links"> 19 <li><a href="">NAV1</a></li> 20 <li><a href="">NAV1</a></li> 21 <li><a href="">NAV1</a></li> 22 </ul> 23 </nav> 24 <small class="footer__copyright">Copyright © 2021 All Rights Reserved.</small> </div> 25</fooder> 26</body> 27</html>
CSS
1.footer-content-wrapper { 2 height: 350px; 3 padding: 30px 0; 4 background-color: #7E7E7E; 5 color: #fff; 6 position: relative; 7} 8.footer-content-wrapper p { 9 font-size: 36px; 10 letter-spacing: 2px; 11 margin-bottom: 20px; 12} 13.fooder-maill a { 14 font-size: 20px; 15 color: #7E7E7E; 16 background-color: #fff; 17 padding: 4px 50px; 18 transform: 0.3s; 19} 20.fooder-maill a:hover { 21 color: #fff; 22 background-color: #7E7E7E; 23 outline: 1px solid #fff; 24} 25.footer-content-wrapper a { 26 color: #fff; 27 text-decoration: none; 28} 29.footer-content-wrapper a:hover { 30 background-color: #fff; 31 color: #7E7E7E; 32} 33.site-map { 34 margin: 20px 0; 35} 36.site-map, .footer-content-wrapper p, .fooder-maill { 37 display: flex; 38 text-align: left; 39 justify-content: left; 40 padding: 0 30px; 41} 42.site-map__works-links { 43 margin: 25px 0 0 50px; 44} 45.footer__copyright { 46 position: absolute; 47 font-size: 1.1rem; 48 bottom: 30px; 49 left: 0; 50 width: 100%; 51 text-align: center; 52}
試したこと
.fooder-maill をclass指定ではなくid指定にしたが、.footer-content-wrapper のスタイルがあたらなくなりましたので、id指定はやめました。
補足情報(FW/ツールのバージョンなど)
AdobeのDreamWeber v21.1を使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/30 03:22
2021/09/30 03:26
2021/10/03 08:13