Q&A
解説ありがとうございます。
###前提・実現したいこと
全ての画像にhoverをかけて、テキストと画像を表示したいのですが、<div class="main__item--3>と<div class="main__item--4>の部分が適応されません
html
1<div class="main"> 2 <img src="img/main_content.png" class="main__img"> 3 <div class="main__item--1 hover"> 4 <div class="main__item--text"> 5 <img src="img/mainitemh1.png"> 6 <p>心から｢きれいに｣｢かわいく｣したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。 7 </p> 8 </div> 9 </div> 10 <div class="main__item--2 hover"> 11 <div class="main__item--text"> 12 <img src="img/mainitemh2.png"> 13 <p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p> 14 </div> 15 </div> 16/*main__item-3,main__item-4だけhoverがかかりません*/ 17 <div class="main__item--3 hover"> 18 <div class="main__item--text"> 19 <img src="img/mainitemh3.png"> 20 <p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p> 21 </div> 22 </div> 23 <div class="main__item--4 hover"> 24 <div class="main__item--text"> 25 <img src="img/mainitemh4.png"> 26 <p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p> 27 </div> 28 </div> 29 <div class="main__item--5 hover"> 30 <div class="main__item--text"> 31 <img src="img/mainitemh5.png"> 32 <p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p> 33 </div> 34 </div> 35 <div class="main__item--6 hover"> 36 <div class="main__item--text"> 37 <img src="img/mainitemh6.png"> 38 <p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p> 39 </div> 40 </div> 41 </div> 42 </div>
css
1.main { 2 height: 100vh; 3 width: 1200px; 4 margin: 410px auto 0; 5 position: relative; 6} 7.main__img { 8 position: absolute; 9 top: 170px; 10 left: 230px; 11 z-index: 100; 12} 13.main__item--1{ 14 background-image: url(../img/mainitem1.png); 15 width: 300px; 16 height: 295px; 17 position: absolute; 18 top: -79px; 19 left: 43px; 20 z-index: 1; 21} 22.hover:hover{ 23 -webkit-transition: all 0.6s ease; 24 transition: all 0.6s ease; 25} 26.main__item--text { 27 filter: alpha(opacity=0); 28 -moz-opacity:0; 29 opacity:0; 30} 31.main__item--text:hover { 32 filter: alpha(opacity=100); 33 -webkit-transition: all 0.6s ease; 34 transition: all 0.6s ease; 35 -moz-opacity:1; 36 opacity:1; 37} 38.main__item--2{ 39 background-image: url(../img/mainitem2.png); 40 width: 220px; 41 height: 275px; 42 position: absolute; 43 top: 34px; 44 left: 731px; 45 z-index: 1; 46} 47.main__item--3{ 48 background-image: url(../img/mainitem3.png); 49 width: 205px; 50 height: 200px; 51 position: absolute; 52 top: 247px; 53 left: 268px; 54 z-index: 1; 55} 56.main__item--4{ 57 background-image: url(../img/mainitem4.png); 58 width: 215px; 59 height: 215px; 60 position: absolute; 61 top: 360px; 62 left: 523px; 63 z-index: 1; 64} 65.main__item--5{ 66 background-image: url(../img/mainitem5.png); 67 width: 234px; 68 height: 234px; 69 position: absolute; 70 top: 581px; 71 left: 784px; 72 z-index: 1; 73} 74.main__item--6{ 75 background-image: url(../img/mainitem6.png); 76 width: 330px; 77 height: 245px; 78 position: absolute; 79 top: 617px; 80 left: 191px; 81 z-index: 1; 82}
回答3件
0
透明で位置が分かりにくいので、.main__item--text にある opacity:0; を opacity:0.2; くらいにしてみたところ、場所がはっきりわかったのでマウスオーバーしてみたところ、hoverは機能しているようです。
位置が想定とずれているとか、そういったことではないでしょうか？確認してみてください。
投稿2017/08/15 03:20
総合スコア219
0
皆さんのご回答で通常は問題ないと思われます。shiroikomaさんのサンプルの通り、動作すると思われますので、提示コード以外の部分では？と考えられます。
一つ気になったのは、HTML部<img src="img/main_content.png" class="main__img">のサイズです。提示コードにはありませんが、実際の画像部分以外に透過部分のサイズが大きすぎて「<div class="mainitem--3>と<div class="mainitem--4>」の部分を隠している可能性があります。背景色指定が無い場合は下の画像は表示されますが、z-indexの関係でhoverが効かないのは充分考えられますので、確認して下さい。（色を着けてみると分かりやすいと思います。）
投稿2017/08/15 05:03
総合スコア3523
0
ベストアンサー
ダミーの画像を入れて記述して見ましたが、どの要素もhoverは効いているようです。
サンプル：https://jsfiddle.net/nssgmxx4/10/
hoverの反応する範囲が、hover後に表示されるmain__item--textの高さになっているようです。
main__item--textの高さと横幅に100%を記述することで、中身が少なくても
外側のdiv(main__item--1など)いっぱいまでmain__item--textの範囲を広げることができます。
html
1 <div class="main"> 2 <img src="https://placehold.jp/457031/ffffff/150x150.png?text=main_%0Acontent" class="main__img"> 3 <div class="main__item--1 hover"> 4 <div class="main__item--text"> 5 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 6 7 <p>心から｢きれいに｣<!--｢かわいく｣したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。--> </p> 8 </div> 9 </div> 10 <div class="main__item--2 hover"> 11 <div class="main__item--text"> 12 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 13 <p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p> 14 </div> 15 </div> 16<!--main__item-3,main__item-4だけhoverがかかりません--> 17 <div class="main__item--3 hover"> 18 <div class="main__item--text"> 19 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 20 <p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p> 21 </div> 22 </div> 23 <div class="main__item--4 hover"> 24 <div class="main__item--text"> 25 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 26 <p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p> 27 </div> 28 </div> 29 <div class="main__item--5 hover"> 30 <div class="main__item--text"> 31 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 32 <p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p> 33 </div> 34 </div> 35 <div class="main__item--6 hover"> 36 <div class="main__item--text"> 37 <img src="https://placehold.jp/313470/ffffff/150x150.png"> 38 <p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p> 39 </div> 40 </div> 41 </div>
css
1.main { 2 height: 100vh; 3 width: 1200px; 4 margin: 410px auto 0; 5 position: relative; 6} 7.main__img { 8 position: absolute; 9 top: 170px; 10 left: 230px; 11 z-index: 100; 12} 13.main__item--1{ 14 background-image: url(https://placehold.jp/300x300.png); 15 width: 300px; 16 height: 295px; 17 position: absolute; 18 top: -79px; 19 left: 43px; 20 z-index: 1; 21} 22 23 24.hover:hover{ 25 -webkit-transition: all 0.6s ease; 26 transition: all 0.6s ease; 27} 28.main__item--text { 29 filter: alpha(opacity=0); 30 -moz-opacity:0; 31 opacity:0; 32 width: 100%; /*横幅100%を追加*/ 33 height: 100%; /*高さ100%を追加*/ 34} 35.main__item--text:hover { 36 filter: alpha(opacity=100); 37 -webkit-transition: all 0.6s ease; 38 transition: all 0.6s ease; 39 -moz-opacity:1; 40 opacity:1; 41} 42.main__item--2{ 43 background-image: url(https://placehold.jp/300x300.png); 44 width: 220px; 45 height: 275px; 46 position: absolute; 47 top: 34px; 48 left: 731px; 49 z-index: 1; 50} 51.main__item--3{ 52 background-image: url(https://placehold.jp/300x300.png); 53 width: 205px; 54 height: 200px; 55 position: absolute; 56 top: 247px; 57 left: 268px; 58 z-index: 1; 59} 60.main__item--4{ 61 background-image: url(https://placehold.jp/300x300.png); 62 width: 215px; 63 height: 215px; 64 position: absolute; 65 top: 360px; 66 left: 523px; 67 z-index: 1; 68} 69.main__item--5{ 70 background-image: url(https://placehold.jp/300x300.png); 71 width: 234px; 72 height: 234px; 73 position: absolute; 74 top: 581px; 75 left: 784px; 76 z-index: 1; 77} 78.main__item--6{ 79 background-image: url(https://placehold.jp/300x300.png); 80 width: 330px; 81 height: 245px; 82 position: absolute; 83 top: 617px; 84 left: 191px; 85 z-index: 1; 86}
投稿2017/08/15 03:18
総合スコア38
shiroikomaさんのやり方でできました。
ありがとうございます。
また何かありましたらよろしくお願いします
解決したようで何よりです^^*
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/15 05:38