ここにより詳細な情報を記載してください。
前提・実現したいこと
Flexboxの子要素のbox全体にリンクを指定し、マウスがa:hoverした時にboxの背景色を変えたいです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
a:hoverのCSSを記述したつもりですが、ずれてしまいます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6<style> 7<!-- 8 9 10 11#main{ 12 display: flex; 13 display: -webkit-flex; 14 flex-wrap: wrap; 15 -webkit-flex-wrap: wrap; 16 box-sizing: border-box; 17 overflow: hidden; 18 width : 100%; 19 padding : 10px 10px 0px; 20 background: #fff; 21 margin-bottom : 0px; 22 justify-content: center; 23} 24 25 26.main-fl{ 27 display:flex; 28 flex-direction: column; 29 -webkit-align-items: center; 30 -webkit-justify-content: center; 31 align-items: center; 32 justify-content: center; 33 border-top-width : 1px;border-style : solid;border-color : #f1f1f1; 34 border-left-width : 1px; 35 border-right-width : 1px; 36 border-bottom-width : 1px; 37 margin-left : 10px; 38 margin-right : 10px; 39 margin-top : 10px; 40 margin-bottom : 1.5em; 41 border-radius: 8px; 42 width : 210px; 43 height : 120px; 44 padding-left : 0px; 45 padding-right : 0px; 46 padding-bottom : 0px; 47 text-align : center; 48} 49 50#main a{ 51 color : #333333; 52 text-decoration: none; 53} 54 55#main a:hover{ 56 margin-left : 10px; 57 margin-right : 10px; 58 margin-top : 10px; 59 margin-bottom : 1.5em; 60 border-radius: 8px; 61 width : 210px; 62 height : 120px; 63 background-color : silver; 64} 65--> 66</style> 67</head> 68<body> 69 <div id="main"> 70 <a href="#"><div class="main-fl">test</div></a> 71 <a href="#"><div class="main-fl">test</div></a> 72 <a href="#"><div class="main-fl">test</div></a> 73 </div> 74</body> 75</html>ソースコード
試したこと
下記のCSSを記述しました。
a:hover{
margin-left : 10px;
margin-right : 10px;
margin-top : 10px;
margin-bottom : 1.5em;
border-radius: 8px;
width : 210px;
height : 120px;
background-color : silver;
}
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/01 06:30
2019/07/01 08:02
2019/07/01 11:03
2019/07/01 23:33