cssまたはjqueryの件で質問です。
背景画像をマウスオーバーで「noneimage(背景画像なし)」に設定しているとして、
その後マウスアウトしても画像が消えたまま(マウスオーバー状態の効果を持続)にするにはどのようにすればいいでしょうか?
とりあえずcssで「:hover」でbackground-image:noneにしていますが、
これだとカーソルがそれた時点で背景画像が出てきてしまいます。
経験が浅いのでcssかjqueryかどちらを使えばいいかわかりませんが
どなたか例を教えて頂けますと幸いです。
どのようにしたいか図で示したものを添付しますので
参考にしてください。
よろしくお願い致します。
No.5ベストアンサー
- 回答日時:
No.2,No3です。
面白そうなので、逆三角形の画像(2色、背景は透明)は用意してください。
画像はサブ項目の数により勝手に伸縮します。
画像を隠そうが消そうが濃くしようが・・お好きに・・・簡単ですが、色々と面白い仕組みになっています。これにCSS3のTransitionsなどを組み合わせると喜ばれるでしょう。
※ただし、実用面では大いに?????です。お遊び程度に考えてください。
いちおうHTML4.01strict+CSS3です。
★Another HTML-lint 5 ( http://www.htmllint.net/en/html-lint/htmllint.ht … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
※タブは_に置換してあるので戻すこと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.nav{text-align:center;width:100%;height:2em;line-height:2em;}
div.nav ol,div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;}
div.nav ol{width:100%;}
div.nav ol li{display:inline-block;width:20%;position:relative;}
/* ここから */
div.nav ol li ol{position:absolute;left:0;top:100%;height:auto;background:url(images/background/triangle.gif) no-repeat;background-size:100% 100%;opacity:0.2}
div.nav ol li ol li{width:100%;margin-top:5px;}
div.nav ol li ol li a{display:block;width:100%;height:100%;display:none;}
div.nav ol li:hover ol li a{display:block;}
div.nav ol li:hover ol{display:block;opacity:1;z-index:10;
/* 画像を消す場合 */
/*background-image:none;*/
}
div.section{position:relative;z-index:5;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<div class="nav">
___<ol>
____<li><a href="A">AAA</a>
_____<ol>
______<li><a href="A/1">AAA-1</a></li>
_____</ol>
____</li>
____<li><a href="B">CATEGORY1</a>
_____<ol>
______<li><a href="B/1">BBB-1</a></li>
______<li><a href="B/2">BBB-2</a></li>
______<li><a href="B/3">BBB-3</a></li>
_____</ol>
____</li>
____<li><a href="C">CATEGORY2</a>
_____<ol>
______<li><a href="C/1">CCC-1</a>
______<li><a href="C/2">CCC-2</a>
_____</ol>
____</li>
____<li><a href="D">DDD</a>
_____<ol>
______<li><a href="D/1">DDD-1</a>
______<li><a href="D/2">DDD-2</a>
______<li><a href="D/1">DDD-1</a>
______<li><a href="D/2">DDD-2</a>
______<li><a href="D/1">DDD-1</a>
______<li><a href="D/2">DDD-2</a>
_____</ol>
____</li>
___</ol>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</p>
__<div class="footer">
___<h2>文書情報</h2>
__</div>
_</div>
</body>
</html>
お返事遅くなり申し訳ございません。
サンプルありがとうございます!
わかりやすくて助かります!
こちら参考にさせていただきます。
質問させていただいた件はおかげさまで
ほぼ解決致しました。
サイト作成は調べつつ試しつつの作業ですね。
ご協力本当にありがとうございます!
No.4
- 回答日時:
マウスが乗っかったら、クラスをどーんと変えてしまうのはどうでしょう。
マウスがいなくなってもクラスは変えられたままです。
<style type="text/css">
.xlist {/* 元のクラス */
background-image: url('./bg.png');
}
.keepNoImage {/* 背景なしのクラス */
background-image: none;
}
</style>
<script type="text/javascript">
function classChange(obj,newName) {// objのクラスをnewNameに変えちゃう
obj.className = newName;
}
</script>
<hx>CATEGORY</hx>
<!-- 最初は'背景付き'、 マウスが乗ると、(自分を, '背景なしのまま'クラスに)変身させる -->
<ul id="QQ" class="xlist" onMouseOver = "classChange(this,'keepNoImage');">
<li><a href="Link01">Link01</a></li>
<li><a href="Link02">Link02</a></li>
<li><a href="Link03">Link03</a></li>
<li><a href="Link04">Link04</a></li>
</ul>
<div onClick="classChange(document.getElementById('QQ'),'xlist');">
ここをクリックすると元通り?(リロードしても元通りですが)
</div>
回答ありがとうございます。
なるほどなるほど!
がっつり変えてしまうのもありですね~。
サブカテゴリがドロップダウンのアクションなので
どんな感じの表現になるかちょっと試してみます。
ありがとうございます!
No.3
- 回答日時:
サブリストが表示されているときは、背景画像が表示されたままと拡大解釈すれば良いでしょうね。
サブリストも当然ながら親コンテナブロックの子供ですから、子供の上にマウスがあるとき=親の上なのですから、子供の上にマウスが乗っても表示され続けるはずですね。すなわち、HTMLは下位リストを持つナビゲーションリストですから、下のような形であるはずですね。
<div class="nav">
<ol>
<li><a href="A">AAA</a></li>
<li><a href="B">CATEGORY1</a>・この項目にポインターが乗ると↑
<ol> ・・・・・・・・・・・・・・この背景は常に見えていて ここから
<li><a href="B/1">BBB-1</a></li>・ここが表示される。 |
<li><a href="B/2">BBB-2</a></li> |
<li><a href="B/3">BBB-3</a></li> |
</ol> |
</li> ↓
<li><a href="C">CATEGORY2</a>
<ol>
<li><a href="C/1">CCC-1</a>
<li><a href="C/2">CCC-2</a>
</ol>
</li>
<li><a href="D">DDD</a>
<ol>
<li><a href="D/1">DDD-1</a>
<li><a href="D/2">DDD-2</a>
<li><a href="D/1">DDD-1</a>
<li><a href="D/2">DDD-2</a>
<li><a href="D/1">DDD-1</a>
<li><a href="D/2">DDD-2</a>
</ol>
</li>
</ol>
</div>
というスタイルシートにすれば良いです。
回答ありがとうございます。
マウスアウト後ものままにしたいと依頼主の要望だったもので...。
詳しく回答頂き感謝です!
こちらで一度試してみます。
No.1
- 回答日時:
消えたままじゃまずいのでは、ないですか?
カテゴリー1にマウスオーバーしてサブリストが表示されていて、その後カテゴリー2に移動するとカテゴリー1のマウスオーバーの設定は解除されないとまずいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストを2つに分割して、それぞ...
-
<ol><li> 左側にスペースがで...
-
css ol liにdisplay:inlineを設...
-
TABLE利用レイアウトからCSS利...
-
透明のボックスにリンクを貼りたい
-
liタグの中に<p>タグやら<dl>を...
-
「olタグ」内に「hタグ要素」...
-
アコーディオンメニューがかく...
-
テーブル内のプルダウンの下に...
-
リストの数字のフォントサイズ...
-
【ヒトの神秘】美男美女から何...
-
CSSで背景画像を一番下にもって...
-
htmlの文字が縦書きになる
-
レスポンシブサイトで、右側に...
-
HTML属性での「""」 「''」違い
-
widthやheightの数値に単位(px...
-
htmlのolやulなどlistにtitleや...
-
定義リストに下線をつけたいと...
-
FC2ショッピングカートのカスタ...
-
CSSの角丸での質問です。 今、C...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報