hover時の高さの取得、hoverした箇所のみにテキストの色を変える方法を教えてください。

下記サンプル画像のようにマウスカーソルを載せたときのhoverのデザインを実現したいです。

htmlは下記のように書いています。

HTML
1                <div class="price_plan__wrapper">
2                    <div class="price_plan">
3                        <p class="plan__title price_plan__hover">基礎プラン</p>
4                        <p class="price">59,000円~</p>
5                        <p class="price__txt">*月額(税別価格)</p>
6                        <div class="check_list">
7                            <img class="check_mark"src="./images/check.jpg" alt="チェック">
8                            <p class="check_list__title">カリキュラム作成</p>
9                        </div>
10                        <div class="check_list">
11                            <img class="check_mark"src="./images/check.jpg" alt="チェック">
12                            <p class="check_list__title">TOEFL学習サポート</p>
13                        </div>
14                        <div class="check_list">
15                            <img class="check_mark"src="./images/check.jpg" alt="チェック">
16                            <p class="check_list__title">週一回のビデオMTG</p>
17                        </div>
18                    </div>
19               <!--同じ記述が３つ続きます。--!>
20    
21                  </div>
22               <!--price_plan__wrapper--!>
23
24     
25
26

hover時に（クラス名:price_plan__hover）のbackgraoundカラーと、(クラス名:price)のテキストカラーが変化するようにjQueryで下記プログラムを指定しました。

jQuery
1    $('.price_plan__hover').hover(function(){
2      //マウスを乗せたら色が変わる
3      $(this).css('background','#F5A623');
4      //マウスを離した時の処理)
5    },function(){
6      //色指定を空欄にして元の色に戻す
7      $(this).css('background','');
8    });
9
10    $('.price_plan__hover').hover(function(){
11      //マウスを乗せた時に.priceの色も変わる
12      $('.price').css('color','#F5A623');
13    },function(){
14        //色指定を空欄にして元の色に戻す
15      $('.price').css('color','');
16    });

（クラス名:price_plan__hover）の高さもhover時に変わるので、そこはcssで
下記のようにしていしました。

css
1.price_plan__hover:hover{
2  height: 90px;
3}

これで
（クラス名:price_plan__hover）hover時にbackground-colorと(クラス名:price)のテキストカラーも変わり、高さも変わるようになったのですが、hover時の高さが下に大きくなってしまうのと(クラス名:price)のテキストがすべて変わるようになってしまいました。

以下が私が書いたコードでの様子です。

hover時に（クラス名:price_plan__hover）の高さを上に大きくして、hoverした箇所のみ(クラス名:price)のテキストの色を変えるにはどうすればいいでしょうか?

行動規範の内容に同意します

回答3件

①下がった分だけ上げれば良いと思います。

CSS
1.price_plan__hover:hover{
2  height: 90px;
3  transform: translateY([高さが増えた分]px);
4}

②ホバーされたされた要素は何番目の要素か取得し、
n番目の.priceの色を指定すればOKだと思います。

投稿2020/11/01 08:35

編集2020/11/01 08:35

Itta

総合スコア105

Fukusuke0604

2020/11/02 15:25

迅速回答いただきありがとうございました。ご返信が遅くなり申し訳ありません。ご協力ありがとうございました。

行動規範の内容に同意します

ベストアンサー

jQuery使わなくても、CSSだけで実現できますね。

css
1.price_plan__hover {
2  height: 60px;
3}
4.price_plan__hover:hover{
5  height: 90px;
6  margin-top: -30px; /* 高さが増えた分上に移動 */
7  background-color: #F5A623;
8}
9
10.price_plan__hover:hover + .price {
11  color: #F5A623;
12}

隣接兄弟結合子(+)で次の要素を指定できます。

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

投稿2020/11/01 10:39

総合スコア34075

2020/11/02 15:23

一番シンプルに説明いただき、無事に実現できました。隣接兄弟結合子(+)で次の要素を指定できる方法を知りませんでした。ご協力本当にありがとうございました。

行動規範の内容に同意します

Javascriptを使わず作成してみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        * {
10            box-sizing: border-box;
11        }
12
13        .allPlanWrap {
14            width: 830px;
15            height: 480px;
16            position: absolute;
17            top: 50%;
18            left: 50%;
19            transform: translate(-50%, -50%);
20            font-size: 0;
21        }
22
23        .planWrap {
24            width: 200px;
25            height: 450px;
26            border: solid 1px rgb(28, 33, 79);
27            position: relative;
28            display: inline-block;
29            bottom: -30px;
30            vertical-align: top;
31        }
32
33        .planWrap:hover {
34            height: 480px;
35            bottom: 0px;
36        }
37
38        .planWrap:not(:last-child) {
39            margin-right: 10px;
40        }
41
42        .planTtl {
43            width: 100%;
44            height: 70px;
45            color: white;
46            background-color: rgb(28, 33, 79);
47            display: inline-block;
48            text-align: center;
49            line-height: 70px;
50            margin-bottom: 15px;
51            position: relative;
52            font-size: 16px;
53        }
54
55        .planWrap:hover .planTtl {
56            height: 100px;
57            line-height: 100px;
58            background-color: rgb(255, 163, 0);
59        }
60
61        .planTtl span {
62            width: 100%;
63            display: block;
64            line-height: 35px;
65        }
66
67        .planWrap:hover .planTtl span {
68            height: 40px;
69            line-height: 4;
70        }
71
72        .planPrice {
73            width: 100%;
74            height: 40px;
75            text-align: center;
76            display: inline-block;
77            line-height: 40px;
78            font-size: 20px;
79            font-weight: bolder;
80        }
81
82        .planWrap:hover .planPrice {
83            color: rgb(255, 163, 0)
84        }
85
86        .monthlyFee {
87            width: 100%;
88            text-align: center;
89            font-size: 15px;
90            display: inline-block;
91            margin-bottom: 20px;
92        }
93
94        .planWrap ul {
95            list-style: none;
96            padding-left: 38px;
97        }
98
99        .planContents {
100            width: 142px;
101            font-size: 15px;
102            display: inline-block;
103            position: relative;
104        }
105
106        .planContents span {
107            display: block;
108            line-height: 1.5;
109            letter-spacing: 0.3em;
110        }
111
112        .planContents::before {
113            content: '';
114            width: 10px;
115            height: 5px;
116            border-left: 3px solid rgb(28, 33, 79);
117            border-bottom: 3px solid rgb(28, 33, 79);
118            transform: rotate(-45deg);
119            position: absolute;
120            top: 5px;
121            left: -20px;
122        }
123
124        .planContents:not(:last-child) {
125            margin-bottom: 20px;
126        }
127    </style>
128</head>
129
130<body>
131    <div class="allPlanWrap">
132        <div class="planWrap test">
133            <span class="planTtl test2">基礎プラン</span>
134            <span class="planPrice">59,000円〜</span>
135            <span class="monthlyFee">*月額（税込価格）</span>
136            <ul>
137                <li class="planContents">カリキュラム作成</li>
138                <li class="planContents">TOEFL学習サポート</li>
139                <li class="planContents">週一回のビデオMTG</li>
140            </ul>
141        </div>
142        <div class="planWrap">
143            <span class="planTtl">演習プラン</span>
144            <span class="planPrice">75,000円〜</span>
145            <span class="monthlyFee">*月額（税込価格）</span>
146            <ul>
147                <li class="planContents">カリキュラム作成</li>
148                <li class="planContents">TOEFL学習サポート</li>
149                <li class="planContents">週一回のビデオMTG</li>
150                <li class="planContents">月二回の模試<span>(解説付き)</span></li>
151            </ul>
152        </div>
153        <div class="planWrap">
154            <span class="planTtl"><span>おすすめ</span><span>志望校対策プラン</span></span>
155            <span class="planPrice">59,000円〜</span>
156            <span class="monthlyFee">*月額（税込価格）</span>
157            <ul>
158                <li class="planContents">カリキュラム作成</li>
159                <li class="planContents">TOEFL学習サポート</li>
160                <li class="planContents">週一回のビデオMTG</li>
161                <li class="planContents">月二回の模試<span>(解説付き)</span></li>
162                <li class="planContents">週一の英語面接対策</li>
163            </ul>
164        </div>
165        <div class="planWrap">
166            <span class="planTtl">フレックスプラン</span>
167            <span class="planPrice">60,000円〜</span>
168            <span class="monthlyFee">*月額（税込価格）</span>
169            <span class="monthlyFee">＊別途ご相談ください</span>
170        </div>
171    </div>
172</body>
173
174</html>