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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

CSS

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

Q&A

解決済

2回答

357閲覧

hoverで対象の要素以外のcssを変更したい

hoge01

総合スコア17

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

CSS

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

0グッド

0クリップ

投稿2017/10/03 14:26

編集2017/10/03 14:31

お疲れ様です
htmlを用いて以下のようなページを書きました
(相も変わらずクソコードですが)
このコードのcssの一番最後の部分で、画像にhoverすると、説明「ああああ」が消えるようにしたいのですが、なかなか実現しません。
どなたかお力添えいただければなと思っています。
javascriptも使えなくはないのですが使うと負けたような気がするので意地を張っています

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <style media="screen"> 6 7 8 .member{ 9 min-width: 1300px; 10 background-color:green; 11 background-size: cover; 12 height:1500px; 13 } 14 .container{ 15 width:100%; 16 padding-top:50px; 17 } 18 19 .member-list{ 20 width:1300px; 21 height:600px; 22 background-color: rgba(0,0,0,0.5); 23 border:2px rgb(0,0,255) solid; 24 margin:30px auto; 25 position:relative; 26 } 27 28 .member-img{ 29 background-color: black; 30 width:100px; 31 border:2px rgb(0,0,255) solid; 32 } 33 34 .member-img:hover{ 35 position: relative; 36 width:120px; 37 z-index: 10; 38 } 39 40 .member-list li{ 41 list-style: none; 42 height:90px; 43 } 44 45 46 .member-explain{ 47 width:950px; 48 height:450px; 49 border:2px rgb(0,0,255) solid; 50 position:absolute; 51 top:16px; 52 left:200px; 53 color:white; 54 padding:50px; 55 } 56 57 .img0:hover + .exp0{ 58 display: none; 59 }/*ここがきかない*/ 60 61 </style> 62 </head> 63 <body> 64 65 <div class="member"> 66 <div class="container"> 67 <div class="member-list"> 68 <ul> 69 <li> 70 <img class="member-img img0" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 71 </li> 72 <div class="member-explain exp0"> 73 <h1>ああああああ</h1> 74 <p>ああああ?</p> 75 </div> 76 77 <li> 78 <img class="member-img img1" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 79 </li> 80 81 <li> 82 <img class="member-img img2" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 83 </li> 84 85 <li> 86 <img class="member-img img3" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 87 </li> 88 89 <li> 90 <img class="member-img img4" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 91 </li> 92 93 <li> 94 <img class="member-img img5" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 95 </li> 96 </ul> 97 </div> 98 </div> 99 </div> 100 </body> 101</html> 102

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

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

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

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

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

guest

回答2

0

ul要素は直下の要素としてdivを持てません。

【ul 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

許可された内容 0 個以上の <li> 要素。

HTML

1<li> 2 <img class="member-img img0" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 3 <div class="member-explain exp0"> 4 <h1>ああああああ</h1> 5 <p>ああああ?</p> 6 </div> 7</li>

投稿2017/10/03 15:42

kei344

総合スコア69364

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

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

hoge01

2017/10/06 02:57

解決しました 返信遅くなってすいませんでした。
guest

0

ベストアンサー

クラスを<li>の方につけたらうまく書けましたけど。。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <style media="screen"> 6 7 8 .member{ 9 min-width: 1300px; 10 background-color:green; 11 background-size: cover; 12 height:1500px; 13 } 14 .container{ 15 width:100%; 16 padding-top:50px; 17 } 18 19 .member-list{ 20 width:1300px; 21 height:600px; 22 background-color: rgba(0,0,0,0.5); 23 border:2px rgb(0,0,255) solid; 24 margin:30px auto; 25 position:relative; 26 } 27 28 .member-img{ 29 background-color: black; 30 width:100px; 31 border:2px rgb(0,0,255) solid; 32 } 33 34 .member-img:hover{ 35 position: relative; 36 width:120px; 37 z-index: 10; 38 } 39 40 .member-list li{ 41 list-style: none; 42 height:90px; 43 } 44 45 46 .member-explain{ 47 width:950px; 48 height:450px; 49 border:2px rgb(0,0,255) solid; 50 position:absolute; 51 top:16px; 52 left:200px; 53 color:white; 54 padding:50px; 55 } 56 57 .img0:hover ~ .exp0{ 58 display: none; 59 } 60 61 </style> 62 </head> 63 <body> 64 65 <div class="member"> 66 <div class="container"> 67 <div class="member-list"> 68 <div class="member-explain exp1"> 69 <p>2</p> 70 </div> 71 <div class="member-explain exp2"> 72 <p>1</p> 73 </div> 74 <div class="member-explain exp3"> 75 <p>1</p> 76 </div> 77 <div class="member-explain exp4"> 78 <p>1</p> 79 </div> 80 <div class="member-explain exp5"> 81 <p>1</p> 82 </div> 83 <ul> 84 <li class="img0"> 85 <img class="member-img" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 86 </li> 87 <div class="member-explain exp0"> 88 <h1>ああああああ</h1> 89 <p>ああああ?</p> 90 </div> 91 92 <li> 93 <img class="member-img img1" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 94 </li> 95 96 <li> 97 <img class="member-img img2" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 98 </li> 99 100 <li> 101 <img class="member-img img3" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 102 </li> 103 104 <li> 105 <img class="member-img img4" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 106 </li> 107 108 <li> 109 <img class="member-img img5" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 110 </li> 111 </ul> 112 </div> 113 </div> 114 </div> 115 </body> 116</html>

私はjQueryの方が好きです。多少助長気味にしてでも、こっちの方がやっていることがわかりやすくていいと思います。

それに加え、位置関係ガン無視で影響を与えられるようになるのも長所です。

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $(".img0").hover( 5 function(){ 6 $(".exp0 *").hide(); 7 }, 8 function(){ 9 $(".exp0 *").show(); 10 } 11 ); 12}); 13</script>

追記

kei344様が仰ったように変更した場合は

css

1.img0:hover + .exp0{ 2 display: none; 3}/*ここがきかない*/

css

1.img0:hover ~ .exp0 *{ 2 display: none; 3}

と変更するだけでhoverで説明文のみ消せます。一石二鳥ですね。

投稿2017/10/03 14:58

編集2017/10/03 16:22
namnium1125

総合スコア2043

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

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

hoge01

2017/10/06 02:58

回答ありがとうございました 遅くなって申し訳ありませんでした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問