Q&A
ありがとうございます！ここまで細かく指定できるのですね、求めてたものがこれでした。
###前提・実現したいこと
全体をaタグで囲っています。
オンマウス時にボタンの部分だけ色を変えたいです。
::selection要素で変更すると思うのですがうまくいきません。。
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
html
1 <body> 2 <div class="pageContents"> 3 <a href=""> 4 <h2>タイトル</h2> 5 <div class="picture"></div> 6 <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーで</p> 7 <p class="btn"> 8 <span>ボタン</span> 9 </p> 10 </a> 11 </div> 12 </body> 13
css
1 2 ::-moz-selection { 3 color: #fff; 4 background: #0c2c83; 5 } 6 7 ::selection { 8 color: #fff; 9 background: #0c2c83; 10 } 11 12.pageContents { 13 width: 360px; 14 margin: auto; 15 background-color: #efefef; 16} 17 18.picture { 19 margin: auto; 20 width: 360px; 21 height: 250px; 22 background: url(http://placehold.it/360x250)no-repeat; 23} 24 25.btn { 26 position: relative; 27 display: block; 28 width: 280px; 29 padding: 20px 0; 30 margin: auto; 31 border: 1px solid #777; 32 background-color: #fff; 33 text-align: center; 34} 35 36.btn span{ 37 position: relative; 38 display: block; 39} 40
回答3件
0
jQueryを使えば大丈夫です。
css
1.btn.active { 2 background-color: #f00; 3}
javascript
1$('.pageContents').bind('mouseenter mouseleave',function(){ 2 $('.btn').toggleClass('active'); 3});
投稿2016/11/25 05:48
総合スコア686
0
ベストアンサー
CSS
1.pageContents:hover a p.btn { 2 background-color: #FF6666; 3}
こんなでどうでしょう
「マウスオーバーしているclass="pageContents"の子要素であるaタグの子要素であるpタグで、class="btn"のものに対して、背景色#FF6666を与える」
という定義です。
タグの親子関係が変わって、例えば必ずしもaタグの中にあるわけではない場合は
CSS
1.pageContents:hover p.btn {
とかしてしまえばいいです
投稿2016/11/25 05:47
編集2016/11/25 06:00
総合スコア5405
0
マウスホバーなら、下記のような感じで出来ます。
CSS
1a:hover .btn { color: red; }
投稿2016/11/25 05:47
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/25 06:29