リストをマウスオーバー時に
一部の文字だけを非表示にしたいのですが
CSSのみでの実行は可能ですか?
jクエリィなどは全然わからないので出来ればCSSのみで実行したいです。。
現在このような↑状態なのですが
ホバー時に▼だけ消えるようにしたいのです。
HTML
<ul> <li><a href="#"><p>あいうえお</p><span>▼</span></a></li> </ul>
CSS
ul { display: flex; justify-content: space-between; margin-top: 50px; text-align: center; } li { background:#DD4548; width: 247px; height: 100px; border-radius: 7px; line-height: 100px; text-align: center; vertical-align: middle; position: relative; display: inline-block; } li p { display: inline-block; font-size: 18px; width: 100%; vertical-align: middle; line-height: 100%; } li a { display: block; width: 100%; height: 100%; } li span { font-size: 30px; position: absolute; top: 90%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform : translate(-50%,-50%); transform: translate(-50%,-50%); }
li span:hover {
color: #DD4548;
}
や
li a:hover {
color: #DD4548;
}
を試しましたが全ての文字が消えてしまったり
▼部分をホバーしないと文字が消えなかったり・・
そもそも私のやりたい事が可能なのかわかりませんが
方法があるのでしたらどなたかよろしくお願い致します><
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/16 04:14