W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:McRzDI さんの質問

【CSS】クラスでのスタイルの指定

全てサイズが同じメニューボタンを作成しました。
マウスオーバーでのオンオフをCSSで切り替えたく、画像もそれに合わせて作っています。(縦80×横100を2枚貼付けた、160×100のもの)

マウスオーバー時の動作は、
menu_a:hover {background-position: left bottom;}
という感じで書いており、きちんと動いたのですが、複数あるメニューボタン全てで同じ動きをするので、どうせならクラスを指定してまとめられないかと思い、各ボタンにclass="hover"のような指定をして、
.hover:hover {background-position: left bottom;}
のように書いたのですが、動かなくなりました。

同じように幅や高さも全て同じサイズになるので、
.hover {weight: 80px; height:100px;}
のように書いたのですが、こちらもスタイルが読み込まれませんでした…。

原因と対応方法がわかる方がいらっしゃいましたら、アドバイスをお願いします。

みんなの回答 5 件

ID:1R6OvW さんの回答

.hoverクラスはHTMLにはJSでつけてるの?

ID:McRzDI

タグで指定しています。
<ul>
<li id="menu_a" class="hover">menu_A</li>
<li id="menu_b" class="hover">menu_B</li>
</ul>
という感じです。
指定方法が間違っているのでしょうか…。

ID:1R6OvW

IDで指定したものをクラスで上書きできないよ。

ID:McRzDI

見逃していました、お返事が遅くなりすみません。

ID>クラスで優先順位があるということだと思うのですが、ID名で指定していないスタイルはクラス名で指定したものを表示すると思っていましたが違うのでしょうか?
(上記では、IDでは背景画像の指定のみでクラスで幅や高さのスタイルを指定しており、そちらは適用されています)

IDを指定している場合、クラス名で疑似クラスは効かない、ということでしょうか…。
その場合、みなさんは全ID名を羅列している…のでしょうか。
なんだかとても無駄が多いように思えるのですが…。

ID:kqgx.3 さんの回答

ulにIDふって(#hoge)ではあかんの?
ul#hoge li:hover{ }

ID:McRzDI

メニューが2つに分かれておりまして…
メニュー①にはmenu_a、menu_b、メニュー②にはmenu_c、menu_dという感じで、どれもサイズや動作は同じ想定です。
なので、できればIDよりもクラスで指定をしたいなと思ったのですが…。

ID:VqZEsu さんの回答

weightって何?これは投稿する際に書き間違えたの?
width,heightじゃないの?

ID:VqZEsu

読み込まれない原因ってたいていは記述ミスだけどな。。。

ID:McRzDI

こちらへは手書きで書いたので書き間違えました。
サイズはwidthで指定しています。

ID:VqZEsu

そうか〜記述ミスではなかったか〜。

ID:23ZkNE さんの回答

idでの指定にbackground-positionを指定しなければ、普通に動くと思うけど。

#menu_a{
 background-image: url(hoge.jpg);
}
.hover:hover{
 background-position: left bottom;
}

もしくは、ulにclassをつければ解決かな

.hover>li:hover{
 background-position: left bottom;
}

ID:McRzDI

ulにクラスを指定してみたのですが、ダメでした…。
positionの指定はしていないのですが、floatはさせています。
これが原因なのでしょうか…。

ID:23ZkNE

どこかに誤りがあるから正常に動かないわけで、トピ主が、誤りの可能性がある部分を出さない限り、解決しないね。

ID:McRzDI

ID名で#menu_a:hover, #menu_b:hover {}という感じに記述すると正常に動くのですが、クラス名以外の原因は考えられるのでしょうか…。
ちなみに、floatを外してもダメでしたが、クラス名でwidthやheightを指定することはできました。

----- HTML -----
<ul>
<li id="menu_a" class="hover">menu_A</li>
<li id="menu_b" class="hover">menu_B</li>
</ul>
----- CSS -----
.hover { width: 100px; height:80px;}
#menu_a {background: url(menu_a.png) no-repeat top left;}
#menu_b {background: url(menu_b.png) no-repeat top left;}

ここまでは問題なく読み込まれています。
とりあえずはID名で羅列させて暫定的に対応しているのですが…。
他に原因となる部分が思い当たらず、困っています…。

ID:uKUIOY

CSSの書き順は?
#menu_a {background: url(menu_a.png) no-repeat top left;}
#menu_b {background: url(menu_b.png) no-repeat top left;}
.hover { width: 100px; height: 80px;}
.hover:hover {background-position: left bottom;}

前後関係でうまく行かない事あるよ。

ID:McRzDI

CSSは、記述していただいたものと同じように、
.hover:hover {background-position: left bottom;}
を一番下に書いています。

ID:FGf1d8

いやこれ、IDのスタイルが優先されてるだけじゃないの?

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
}
#menu_a {
background-image: url(menu_b.png);
background-repeat: no-repeat;
}
.hover {
width: 100px;
height: 80px;
background-position: top left;
}
.hover:hover {background-position: left bottom;}

ID:McRzDI

埋もれてしまったのにご回答ありがとうございます。。

つまり、IDを指定している場合、クラス名で疑似クラスは効かない、ということでしょうか…?
そういう時は、みなさんは全ID名を羅列して疑似クラスを適用させているのでしょうか?

ID:FGf1d8

#menu_a {
background: url(menu_a.png) no-repeat top left;
}

は、

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
}

の省略形なのはわかってる?

上の人も言ってるけど、IDで指定したものをクラスで上書きはできないから、

.hover:hover {
background-position: left bottom;
}

は反映されない。

ID:McRzDI

お返事が遅くなりすみません。

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
}
は理解しています。

.hover { width: 100px; height: 80px;}
こちらも適用はされているので、#menu_aに対しては、

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
width: 100px;
height: 80px;
}
が適用されている、ということになりますよね?

上記では、IDで指定しているものでも、クラスのスタイルも適用されており、適用されていないのは疑似クラスのみ、となるので、IDを指定している場合はクラスは適用されるが疑似クラスは適用されない、ということだと思っていますが、認識が違いますでしょうか?

ID:McRzDI さんの回答

どなたかわかる方がいらっしゃれば、回答いただきたいです。

----- HTML -----
<ul>
<li id="menu_a" class="hover">menu_A</li>
<li id="menu_b" class="hover">menu_B</li>
</ul>

----- CSS -----
#menu_a {
background: url(menu_a.png) no-repeat top left;
}
#menu_b {
background: url(menu_b.png) no-repeat top left;
}
.hover { width: 100px; height: 80px;}
.hover:hover {
background-position: left bottom;
}

以上のような記述をしていた場合、menu_A、menu_Bに対して、

background-image: url(各ファイル名.png);
background-repeat: no-repeat;
background-position: top left;
width: 100px;
height: 80px;

は適用されているのですが、最後の
.hover:hover {
background-position: left bottom;
}
の部分が反映されません。

これまでのご指摘で、IDを指定しているものに対してクラスを指定しても適用されない、と言われましたが、widthとheightは適用されており、適用されていないのは疑似クラスのみなのですが、IDを指定している場合はクラスは適用されるが疑似クラスは適用されない、という考えで正しいのでしょうか?
また、似たような処理は他のWebサイトでもされているかと思うのですが、疑似クラスが適用されない場合、皆様は全IDを指定して疑似クラスを記述されていらっしゃるのでしょうか?

ご回答いただけますと幸いです。

ID:0bJlzn

#menu_a.hover:hover、#menu_b.hover:hover
こういう書き方ならうまくいく。

下記だとトピ主の希望の動くだと思う。

<ul>
<li class="menu_a hover">menu_A</li>
<li class="menu_a hover">menu_B</li>
</ul>

.menu_a {
background: url(menu_a.png) no-repeat top left;
}
.menu_b {
background: url(menu_b.png) no-repeat top left;
}
.hover { width: 100px; height: 80px;}
.hover:hover {
background-position: left bottom;
}

ID:RhgawK

IDでのposition指定に、classでのposition指定が負けてるだけかと。
widthとheightは、IDのほうに競合する記述がないですから。疑似クラス云々は関係ないと思います。
2014-07-11 · ID:FGf1d8YOW6mm の人が書いてくれた内容は試しましたか?

今の形のままいきたいなら、
.hover:hover {
background-position: left bottom !important;
}
にすれば動くと思いますよ。

ID:sX6Phg

優先順がID > クラスである事は理解されていると思いますが
同じ要素にIDとクラスを指定した場合も、同様の優先順になります。
つまり「#menu_a > .hover」という関係になるため、#menu_aに指定されたbackground-repeat: no-repeat;が反映されます。

#menu_a {} (IDのためこちらが優先)
.hover:hover {}(クラスだけではIDを上書き出来ない)

↓↓↓

#menu_a {}
#menu_a.hover:hover {}(ID+クラスのため、IDのみの#menu_aを上書き)

ID:sX6Phg

↑ ミスってました。background-positionが反映、です

ID:McRzDI

たくさんのご回答ありがとうございます。

>0bJlznEjBImd様
#menu_a.hover:hover、#menu_b.hover:hover
こちらだと、確かに希望通りの動きをしてくれます。
ただ、同じ動きをさせるものなので、IDを羅列するよりはクラス名でまとめたいなと思ったのが事の発端でした。

>RhgawKHeWzdX様
こちらにコメントしてくださった方法は全て試したのですが、!importantは失念しておりました。
!importantで試したところ、無事に表示させることができました。
ありがとうございます!

>sX6Phg94h4az様
ご解説ありがとうございます。
IDで指定していたtop leftが残っていたのですね。
理解できました…ありがとうございます。

皆様、ご回答ありがとうございます。
おかげさまで、どこが間違っていたのか理解することができました。
お時間を割いてくださり、感謝いたします。

ID:ZEs87M

一度、#menu_aにwidth: 50px;を追加したら疑問が解決すると思う 。

最終更新日:2014-07-15 (2,354 views)

関連するトピックス

ページ上部に戻る