:hover, :focus時に下線の表示と非表示を行う方法
問題
現在iSaraの模写をしています。
アコーディオンのQuestion部分を:hover, :focusした際に下線が表示され、
アコーディオンのQuestion以外を:hover, :focusすると下線が非表示になります。
下記の挙動を目指しています。
— 霧崎さくや (@Sakuya_wd) January 10, 2021
現状
— 霧崎さくや (@Sakuya_wd) January 12, 2021
ソースコード
自身で書いたアコーディオンのソースコードです。
模写先のサイトで:hoverと:focusを使用しており、
自分なりに試してみましたが目標の挙動になりませんでした。
index.html
<div class="twentiethSection">
<div class="twentiethSection-firstParagraph">
<p><i class="far fa-envelope-open"></i>よくある質問</p>
</div>
<ul>
<li>
<div class="twentiethSection-firstInner">
<div class="twentiethSection-secondParagraph">
<p><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？</p>
<div class="twentiethSection-firstCloseArrow"></div>
<div class="twentiethSection-firstOpenArrow"></div>
</div>
</div>
<div class="twentiethSection-secondInner">
<div class="twentiethSection-thirdParagraph">
<p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテ
<br>
ストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p>
</div>
</div>
</li>
</ul>
</div>
style.css
.twentiethSection{
background-color: #ffffff;
width: 100%;
height: 1205px;
}
.twentiethSection-firstParagraph{
padding: 61px 1px 0px 0px;
text-align: center;
}
.twentiethSection-firstParagraph p{
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 28px;
line-height: 40px;
color: #333333;
letter-spacing: 0.06em;
}
.twentiethSection-firstParagraph i{
display: inline-block;
font-size: 1.02em;
}
.twentiethSection-firstInner{
width: 1110px;
height: 62px;
margin: 40px auto 0 auto;
border-bottom: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
border-top: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
border-radius: 2px;
}
.twentiethSection-secondParagraph{
margin: 20px 19px 0px 20px;
padding: 0px 6px 0px 0px;
}
.twentiethSection-secondParagraph p{
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 20px;
line-height: 22px;
color: #000000;
letter-spacing: 0.07em;
}
.twentiethSection-secondParagraph i{
color: #3D84B6;
font-size: 0.93em;
}
.twentiethSection-secondParagraph:hover, :focus{
text-decoration: underline;
cursor: pointer;
}
.twentiethSection-firstCloseArrow{
margin: -22px 0px 0 auto;
content: '';
border-top: solid 5px #E5E5E5;
border-right: solid 5px #E5E5E5;
width: 9px;
height: 9px;
transform: rotate(130deg);
}
.twentiethSection-firstOpenArrow{
margin: -15px 0px 0 auto;
content: '';
border-top: solid 5px #E5E5E5;
border-right: solid 5px #E5E5E5;
width: 9px;
height: 9px;
transform: rotate(-45deg);
display: none;
}
1
