質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2951閲覧

cssにて複数画像のホバーアクションをそれぞれにかけたい

kings_of_king12

総合スコア33

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/08 23:25

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 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/03/09 12:37

>それぞれの画像タグをidで指定すれば良いのですが、そうなると画像の数だけコードを書かなければならないのでどうにかclassタグにて実装したいです。 → どういう事でしょうか? idタグとclassタグの「解釈」が少し違うような気がします。
guest

回答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
gogojp

総合スコア211

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kings_of_king12

2019/03/16 07:29

ありがとうございます。 思ったとおりに動いてくれました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問