Q&A
＞それぞれの画像タグをidで指定すれば良いのですが、そうなると画像の数だけコードを書かなければならないのでどうにかclassタグにて実装したいです。
→ どういう事でしょうか？ idタグとclassタグの「解釈」が少し違うような気がします。
cssを使って画像にホバーしたときホバーエフェクトをつけたいです。
しかしすべての画像をclassタグで指定してるため、一つの画像にホバーしたときすべての画像にホバーエフェクトが付いてしまいます。
それぞれの画像タグをidで指定すれば良いのですが、そうなると画像の数だけコードを書かなければならないのでどうにかclassタグにて実装したいです。
classタグを用いてそれぞれにホバーしたときホバーした画像だけエフェクトがかかるようにするにはどうすればよろしいでしょうか？
【現状】
ホバーエフェクトはできている。
【解決したい部分】
ホバーしたとき全ての画像がホバーエフェクトしてしまう。
下記がソースです。
※main.imgがホバーエフェクトをかけている部分です。
html
1<body> 2 <!-- <div id="title-main">IDENTITY</div> 3 <div id="title-bottom">to Portfolio</div> 4 5 <div class=“side”> 6 <img class="site" src="image/site/site1.png"> 7 </div> --> 8 9 <div class="container"> 10 <!-- <header class="header">header</header> --> 11 12 <div class="content"> 13 14 <div class="side"> 15 <div id="title-main">text</div> 16 <div id="title-bottom">text</div> 17 </div> 18 <div class="main"> 19 <ul> 20 <li><a href="#"><img class="site a" src="image/site/site1tri.png"></a></li> 21 <li><a href="#"><img class="site" src="image/site/site2tri.png"></a></li> 22 <li><a href="#"><img class="site" src="image/site/site3tri.png"></a></li> 23 <li><a href="#"><img class="site" src="image/site/site4tri.png"></a></li> 24 <li><a href="#"><img class="site" src="image/site/site5tri.png"></a></li> 25 </ul> 26 </div> 27 </div> 28 29 <!-- <footer class="footer">footer</footer> --> 30 </div> 31</body> 32</html>
css
1body{ 2 font-family: 'Hind', sans-serif; 3 font-weight: lighter; 4} 5#title-main{ 6 position: absolute; 7 top: 20%; 8 left:23%; 9 font-size: 1.5em; 10} 11#title-bottom{ 12 position: absolute; 13 top: 24.5%; 14 left:23.4%; 15 font-size: 1em; 16} 17 18 19 20.site{ 21 width: 50%; 22 padding-left: 45%; 23 padding-top: 3%; 24 padding-bottom: 25%; 25 26} 27.main img { 28 opacity: 1; 29 -webkit-transition: .3s ease-in-out; 30 transition: .3s ease-in-out; 31 } 32 .main:hover img { 33 opacity: .5; 34 } 35 36 .container { 37 padding: 1%; 38 } 39 40 /* .footer { 41 display: flex; 42 align-items: center; 43 justify-content: center; 44 height: 200px; 45 background: #eee; 46 } */ 47 48 .content { 49 display: flex; 50 } 51 52 .main { 53 width: 70%; 54 /* flex: 1 0 auto; 55 displaadding: 20px 0;y: flex; 56 align-items: center; 57 justify-content: center; */ 58 height: 2000px; 59 margin-right: 10px; 60 background: #ccc; 61 background: linear-gradient(to bottom, #eeeeee 0%,#B7EAE0 100%); 62 /* position: relative 0 0 0 0; */ 63 64 } 65 .side { 66 display: flex; 67 align-items: center; 68 justify-content: center; 69 position: -webkit-sticky; 70 position: sticky; 71 top: 10px; 72 width: 140px; 73 height: 140px; 74 color: #fff; 75 background: #30b298; 76 }
回答1件
0
ベストアンサー
css
1.main:hover img { 2 opacity: .5; 3}
.main:hover imgですと、.mainをhoverした時.main内にあるimgタグ全てのopacityを0.5にするということになるで、ホバーしても全ての画像にエフェクトがついてしまいます。
なのでこの部分を以下のように変更
CSS
1.main img:hover { 2 opacity: .5; 3}
このように変更すれば、.main内のimgタグをhoverした時そのimgタグのopacityを0.5にするということになるで、個別にエフェクトがつきます。
投稿2019/03/09 01:32
編集2019/03/09 01:33
総合スコア211
あなたの回答
tips
プレビュー
