マウスアウト後も画像が消えたままにしたいのですが

解決済

質問者：o_coco3
質問日時：2012/09/13 08:33
回答数：5件

cssまたはjqueryの件で質問です。  

背景画像をマウスオーバーで「noneimage（背景画像なし）」に設定しているとして、 
その後マウスアウトしても画像が消えたまま（マウスオーバー状態の効果を持続）にするにはどのようにすればいいでしょうか？  

とりあえずcssで「:hover」でbackground-image:noneにしていますが、
 これだとカーソルがそれた時点で背景画像が出てきてしまいます。

  経験が浅いのでcssかjqueryかどちらを使えばいいかわかりませんが 
どなたか例を教えて頂けますと幸いです。  

どのようにしたいか図で示したものを添付しますので 参考にしてください。

  よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2012/09/14 00:44

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">

＿</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>

- 0
- 件

通報する

この回答へのお礼

お返事遅くなり申し訳ございません。

サンプルありがとうございます！
わかりやすくて助かります！

こちら参考にさせていただきます。

質問させていただいた件はおかげさまで
ほぼ解決致しました。

サイト作成は調べつつ試しつつの作業ですね。

ご協力本当にありがとうございます！

通報する

お礼日時：2012/09/19 10:36

No.4

回答者： e_watt
回答日時：2012/09/13 22:08

マウスが乗っかったら、クラスをどーんと変えてしまうのはどうでしょう。

マウスがいなくなってもクラスは変えられたままです。

<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>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

なるほどなるほど！
がっつり変えてしまうのもありですね～。

サブカテゴリがドロップダウンのアクションなので
どんな感じの表現になるかちょっと試してみます。

ありがとうございます！

通報する

お礼日時：2012/09/13 23:02

No.3

回答者： ORUKA1951
回答日時：2012/09/13 20:08

　サブリストが表示されているときは、背景画像が表示されたままと拡大解釈すれば良いでしょうね。

サブリストも当然ながら親コンテナブロックの子供ですから、子供の上にマウスがあるとき＝親の上なのですから、子供の上にマウスが乗っても表示され続けるはずですね。

すなわち、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>

というスタイルシートにすれば良いです。