HTMLを記述してWEBサイトを作成していると、CSS の設定に
!important
と言うのが出て来る。
この存在は数か月前から知っていたのだが、意味を今まで知らなかった。
コピペして来たCSSの中に !important が有っても良く分からないままそのまま使っていた。
で、今日こんな場面に遭遇した。
以下の赤い四角にマウスを持って行くとボタンが出る仕組みだ。
そのボタンを押すと今日の日時が表示出来る。
例えば何かの設定ボタンなど、普段は使用頻度の少ないボタンなどを通常は非表示にしておいて、必要な時にマウスを持って行くと表示する小細工だ。
Chrome, Firefox, IE で試したらうまく動いた。
で、このアイディアは、
Show div on hover with CSS stackoverflow
から借用したのだが、stackoverflow の例では自動で隠すモードのみのやり方だ。
ワテとしては、それを改造して、
自動で隠すモード
常時表示モード
を切り替えたい。
それで即席で、こんな JavaScript を作成してみた。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ボタンを自動で非表示にしたり、あるいは常時表示にするJavaScript実験</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<style type="text/css">
#parent_div:hover #child_div {
/* display: block; */
display: block!important;
}
#child_div {
display: none;
}
</style>
<div id="parent_div" style="width:300px;height:300px;border:2px solid red">
<div id="child_div">
<label id="labelID">自動で隠すモード</label><br />
<button onclick=" alert(new Date())">今の日時は？</button>
<button onclick="button_click_func()">表示モード切替</button>
</div>
</div>
<script type="text/javascript">
var toggle = false;
function button_click_func() {
if (toggle) {
$('#child_div').css('display', 'none');
$('#labelID').text('自動で隠すモード');
} else {
$('#child_div').css('display', 'block');
$('#labelID').text('常時表示モード');
}
toggle = !toggle;
}
</script>
</body>
</html>
いちおう、これが完成版なので、期待通りの動きをする。
試してみたい人は、上記の HTML をメモ帳にでもコピペして test.html と言うような適当なファイル名で保存してブラウザーで開いてみると良い。ファイル保存する場合は文字コードは UTF-8 にする。
さて、当記事ではこのJavaScriptコードを作成した過程で、cssの!importantの挙動で新しい発見があったので、ワテの備忘録としてこの記事に残す事にした。
では、本題に入ろう。
JavaScriptコードの説明
CSSの設定において、当初は stackoverflowの例をそのまま参考にしてdisplay: block;と記述していた。
つまり、赤枠 (parent_div) にマウス hover すると内側の child_div をdisplay: block;で表示するのだ。
#parent_div:hover #child_div {
display: block;
/* display: block!important; */
}
child_div は以下の設定がされているので、通常は非表示。
#child_div {
display: none;
}
それが mouse hover で display:block に変更されるので、その中にあるボタンが表示される仕組みだ。
[表示モード切替]ボタンのクリックでdisplay:blockとdisplay:noneをトグルに切り替えるようにしたのが以下の JavaScript だ。
function button_click_func() {
if (toggle) {
$('#child_div').css('display', 'none');
$('#labelID').text('自動で隠すモード');
} else {
$('#child_div').css('display', 'block');
$('#labelID').text('常時表示モード');
}
toggle = !toggle;
}
[表示モード切替]ボタンクリックでこの関数が実行されて child_div が display:block になると（elseの場合）、常時表示される。
さらにもう一回[表示モード切替]ボタンをクリックすると、child_div は display:none になり非表示になる。
問題はここだ。
ここで display:none に設定すると、
#parent_div:hover #child_div に設定している display: block; が効かなくなってしまった。
その結果、二度とchild_divやその中の二つのボタンが表示されない。
解決方法は以下の通り。
display: block!important;にした
この
display: block;
の部分を
display: block!important;
に変更すると期待通りの動きになった。
つまり、無事にchild_divを display:none と display:block!important で表示をトグル出来るようになった。
!important の正確な意味については、こういう公式の解説が良いかもしれない。
http://w3.org/TR/CSS2/cascade.html#important-rules
英語なので良く分からん。
兎に角、important (重要) なので注意してちょうと、ブラウザに指示するようだ。
こうしておくと、JavaScript の中で、
$('#child_div').css('display', 'none');
を実行して一旦child_divが非表示になっても、その後、parent_divにmouse hoverイベントが発生した場合には、以下の設定が効いて
#parent_div:hover #child_div {
/* display: block; */
display: block!important;
}
無事に display: block!important; が実行される。
その結果、display:none;で消えていたchild_divが再び表示されるのだ。
なるほど。
!importantはこう言う場合に使うといいんだな。
ワテの場合、兎に角!importantを使う癖が有ったのだが、むやみやたらに使うのではなく、必要な場所にのみ!importantは使うべきなのだ。
CSSを勉強する
ほんまにスラスラ分かるのかな？まあランクも高いし読んでみるのも良いかも。
ワテはプロじゃなくて素人なのだが、一応プロを目指したい。犬が可愛いな。
コメント