Q&A
質問が分かりづらいので、例えば画像などでイメージがあると伝わりやすいと思います
マウスオーバー時に暗くする方法を教えてください。
背景をあらかじめ暗くして、その上に画像を載せてそれを透明度を上げることで暗くするという方法は見つけました。
しかし、画像でなく、あらかじめ背景色を白で指定してて。これをマウスオーバー時に画像や背景色、テキスト一緒にグレー色というか、暗くしたいのですが、どうしたらいいですか？
上記の方法しかないんでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>サンプル</title> 6<link rel="stylesheet" href="sample.css"> 7</head> 8<body> 9 10 11 <div class="i"> 12 <p><a href=""><img src="gazou.png" class="g">あ</a></p> 13 </div> 14 15 16</body> 17</html>
css
1.i { 2 background-color: #FFFFFF; 3 width: 20px; 4 height: 100px; 5 align-items: center; 6 justify-content: center; 7 position: relative; 8} 9 10.i :hover { 11 opacity: 0.5; 12} 13
質問に直接関係ありませんが、HTMLにはi要素というものがあるので、
要素名と同じクラス名はやめた方がいいかと思います。例題だとしてもです。
Takumibooさんのおっしゃる通り、画像でこういう状態からこうしたい、と記載いただければと思います。
回答2件
0
CSS
1.i:hover { 2 filter: brightness(50%); 3}
投稿2020/01/21 05:05
総合スコア13749
0
ベストアンサー
最初から透明なダミーをかぶせておくとか
投稿2020/01/21 01:38
編集2020/01/21 08:26
総合スコア117613
<style>
.wrap{
position:relative;
width:200px;
}
.wrap > div{
width:100%;
position:absolute;
}
.i{
z-index:1;
background-Color:yellow;
}
.dummy{
z-index:2;
opacity:0;
}
.dummy:hover{
background-Color:black;
opacity:0.5;
}
</style>
<div class="wrap">
<div class="i">
hoge
</div>
<div class="dummy"> </div>
</div>
あなたの回答
tips
プレビュー
