プロが教えるわが家の防犯対策術！

リモートロールオーバーを教えてください。

解決済

  • 質問者：Jack-Jill
  • 質問日時：
  • 回答数：6件

cssだと次のような感じで、作成したのですが、なぜか番号の挙動がおかしいので、JavaScriptに切り替えたいと思います。実際には説明の場所には写真が入ります。ポイントは、リモートロールオーバーで、写真の内容がバックグラウンドで番号付きリスト側にも強調されることです。

どのようにすればいいのか教えてください。
javaScriptでがんばりたいですが、Jqueryの記述も比較の為教えてくだされば幸いです。
どうぞよろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>test</title>
<style type="text/css">
.menu li span {
display:none;
padding:5px;
}
.menu li:hover{
display:block;
background:#cccccc;
}
.menu li:hover .setumei {
display:block;
position:absolute;
top:20px;
left:7em;
width:500px;
height:300px;
background:#ffffff;
}
</style>
</head>
<body>
<ol class="menu">
<li>メニュー1<span class="setumei">オンマウス時に表示される説明1。</span></li>
<li>メニュー2
　　　<span class="setumei">オンマウス時に表示される説明2。</span></li>
<li>メニュー3
　　　<span class="setumei">マウスが乗った時に表示される説明3。</span></li>
<li>メニュー4
　　　<span class="setumei">マウスが乗った時に表示される説明4。</span></li>
</ol>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： ORUKA1951
  • 回答日時：

そりゃCSSを書き直したほうが良いかと・・


デザイン、いつでも好きに変えられるし、データが増減しても問題ないし・・
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　でいうと、スタイルシートの[テスト][画像下]
「ブラウザの表示メニュー→スタイルシートを選択--Chromeを除く」
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。それで、olのolたるorderが消えては意味がありませんし、写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。

それを踏まえて、どうｃｓｓを書きなおした方がいいとおっしゃるのか、理解に苦しみます。おそらく、私が理解不足なのでしょう。更なる、ご指導をいただけたら幸いです。

通報する
お礼日時：2014/01/25 12:43

No.2

  • 回答者： ORUKA1951
  • 回答日時：

No.1です。


＞olのolたるorderが消えては意味がありませんし、
　これは、スタイルシートでもどうにもなります。olでマークアップされているか、いないかとはまったく関係ありません。文書構造とプレゼンテーションの分離とはそういう意味です。olで番号が振られること自体、ブラウザが自身の持つスタイルシートでそうしているだけですからね。
　⇒HTML list-styleに見出し - Webデザイン・CSS - 教えて！goo( http://oshiete.goo.ne.jp/qa/8419524.html )
　では、普通の階層構成の見出しに番号を振る方法を解説しました。

＞写真もコンテンツであり、cssが有効でない場合にも、表示されないと困ります。
　ということは、マークアップは
<ol>
　<li>メニューボタンのカバーを外す<img src="" width="" height="" alt="">
　　　<p>カバーと本体の隙間にマイナスドライバーを入れてこじる。</p>
　</li>
　<li>２本のネジを外す<img src="" width="" height="" alt="">
　　　<p>ドライバーは＋1番を使用して伸張に外してください。</p>
　</li>
　<li>パネルを取り外す<img src="" width="" height="" alt="">
　　　<p>パネルを取り外すとディスプレイのヒンジを固定するビスが現れます。</p>
　</li>
</ol>
とか、あるいは普通のマニュアルのように・・記事が長いときはこちらが良いでしょう。

<div class="section manual">
　<h2>メニューボタンのカバーを外す</h2>
　<p><img src="" width="" height="" alt=""></p>
　<p>カバーと本体の隙間にマイナスドライバーを入れてこじる。</p>
</div>
<div class="section manual">
　<h2>２本のネジを外す</h2>
　<p><img src="" width="" height="" alt=""></p>
　<p>ドライバーは＋1番を使用して伸張に外してください。</p>
</div>
以下省略・・・・
　どんな物でも、HTMLがちゃんと出来ていたら、全く同じにデザインできます。

実際のサンプルです。
　マークアップは、HTML5を見据えて!!、HTML5の新しい要素名をDIVは「class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」してありますので、そのまま
<div class="section"></div>→<section></section>など変更するとHTML5になります。
header,section,footer,figure,figcaption
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済みのHTML4.01strict+CSS3(box-shadowのみ)
★印刷時、画像は消えちゃまずいので、画像はfloatにしてあります。(印刷プレビューで試す)
★タブは＿に置換してあるので戻す。

<!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" media="screen">
<!--
div.section{width:600px;margin:0 auto;position:relative;height:380px;}
div.section ol{width:120px;margin:0;padding:0;}
div.section ol li{width:100px;color:gray;}
div.section ol li div.figure,
div.section ol li div.figure div.figcaption{position:absolute;}
div.section ol li div.figure{top:10px;right:10px;width:480px;height:360px;
}
div.section ol li div.figure div.figcaption{
＿bottom:10px;width:320px;
＿left:20px;margin:0;padding:0 0.5em;line-height:1.6em;
＿background-color:white;
＿text-indent:1em;font-size:0.95em;
＿box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
div.section ol li+li div.figure{display:none;}
div.section ol li:hover{background-color:yellow;color:black;}
div.section ol li:hover div.figure{display:block;}

-->
＿</style>
＿<style type="text/css">
<!--
div.section ol li,div.footer{clear:right;}
div.section ol li div.figure img{float:right;margin:10px;}
div.section ol li div.figure div.figcaption{
＿margin-top:1em;
＿text-indent:1em;font-size:0.95em;
}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページではBIBLO NEの分解方法を解説</p>
＿</div>
＿<div class="section">
＿＿<h2>分解手順</h2>
＿＿<ol>
＿＿＿<li>メニューボタンのカバーを外す
＿＿＿＿<div class="figure">
＿＿＿＿＿<img src="./images/BIBLO/01.jpg" width="480" height="360" alt="隅角にいれる。">
＿＿＿＿＿<div class="figcaption">カバーと本体の隙間にマイナスドライバーを入れてこじる。</div>
＿＿＿＿</div>
＿＿＿</li>
＿＿＿<li>２本のネジを外す
＿＿＿＿<div class="figure">
＿＿＿＿＿<img src="./images/BIBLO/02.jpg" width="480" height="360" alt="傾かないように">
＿＿＿＿＿<div class="figcaption">ドライバーは＋1番を使用して伸張に外してください。</div>
＿＿＿＿</div>
＿＿＿</li>
＿＿＿<li>パネルを取り外す
＿＿＿＿<div class="figure">
＿＿＿＿＿<img src="./images/BIBLO/03.jpg" width="480" height="360" alt="片側3本ずつ">
＿＿＿＿＿<div class="figcaption">パネルを取り外すとディスプレイのヒンジを固定するビスが現れます。</div>
＿＿＿＿</div>
＿＿＿</li>
＿＿</ol>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

私のしたいことを文章構造化すると、やはり、質問のhtmlにもどってしまいました。

ORUKA1951さんのソースは上手く行きましたが、私のソースのどこが問題だったかは結局わかりませんでした。また、ピンポイントに質問しているにもかかわらず、いろいろな要素を付け加えて、わかりにくくされている意図が、わかりかねました。

疑問への解説は全くなく、疑問以外の解説があるという不思議な回答に戸惑いました。

時間を割いていただきありがとうございました。

通報する
お礼日時：2014/02/01 08:21

No.3

  • 回答者： ORUKA1951
  • 回答日時：

No.1/2です。


　スタイルシートが適用されないときは、素のブラウザの持つスタイルシートのみで表示されます。
　印刷を想定されるなら、(数倍の)大き目の画像をIMG要素のwidth=,height=属性で縮めて表示させておくと、きれいに印刷できます。
　縦横比(アスペクト比)やサイズの異なる画像を表示枠にフィットさせることも出来ます。置換インライン要素であるimg要素にdisplay:block;height:90%;width:auto;とすると、直近のstaticでコンテナブロックのサイズに合わせてくれます。ちょっと工夫する(display:inline-block)と表示枠の中心に置けます。CSS3の時間的変化を併用するとスライドショー的にもできます。

　マニュアルや商品説明、ナビゲーションで、とってもよく使うスタイルシートですから、覚えておくと良いでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

時間を頂き、ありがとうございました。

通報する
お礼日時：2014/02/01 08:26

No.4

  • 回答者： ORUKA1951
  • 回答日時：

ちょっと遊んでみた


＿<style type="text/css" media="screen">
<!--
div.section{width:600px;margin:0 auto;position:relative;height:380px;}
div.section ol{width:120px;margin:0;padding:0 10px 0 0;}
div.section ol li{width:100px;color:gray;}
div.section ol li div.figure,
div.section ol li div.figure div.figcaption{position:absolute;}
div.section ol li div.figure{top:30px;right:10px;width:480px;height:360px;
}
div.section ol li div.figure div.figcaption{
＿bottom:10px;width:400px;
＿left:20px;margin:0;padding:0 0.5em;line-height:1.6em;
＿background-color:white;
＿text-indent:1em;font-size:0.95em;
＿box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
＿display:none;
}
div.section ol li div.figure img:hover+div.figcaption{
＿display:block;
}
div.section ol li+li div.figure{display:none;}
div.section ol li:hover{background-color:yellow;color:black;padding:0 10px 0 0;}
div.section ol li:hover div.figure{display:block;}
div.section h2:after{content:"画像にポインターを乗せると説明が表示されます。";color:red;font-size:0.7em;}
-->
＿</style>
＿<style type="text/css" media="print">
<!--
div.section ol li,div.footer{clear:right;}
div.section ol li div.figure img{float:right;margin:10px;display:block;width:100mm;height:auto;}
div.section ol li div.figure div.figcaption{
＿margin-top:1em;
＿text-indent:1em;font-size:0.95em;
}
div.section ol li{
page-break-inside:avoid;}/* li内での改ページ禁止 */
-->
＿</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/02/01 08:26

No.5ベストアンサー

  • 回答者： taloo
  • 回答日時：

>なぜか番号の挙動がおかしいので、



.menu li:hover{
/*display:block;*/ /*これを消してください */
background:#cccccc;
}

======
jQuery
no-script環境は考慮していません。

<style type="text/css">
.menu li .setumei {
position:absolute;
top:20px;
left:7em;
width:500px;
height:300px;
background:#ffffff;
padding:5px;
}
</style>

<script src="jquery.js"></script>
<script>
jQuery(function($){
$(".menu li .setumei").hide();

$(".menu li")
.on('mouseover', function(){
$(this).css('background-color', '#ccc').find('.setumei').show();
})
.on('mouseout', function(){
$(this).css('background-color', '').find('.setumei').hide();
});

});
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

Cssの指摘ありがとうございました。上手く行きました。

また、jQueryもご教示いただきありがとうございます。これをとっかかりにjQueryまたはJavaScriptの勉強を開始しようかなと思います。そんなに、難しくなさそうな気がしてきました。

通報する
お礼日時：2014/01/29 04:01

No.6

  • 回答者： ORUKA1951
  • 回答日時：

No.2です。


＞私のソースのどこが問題だったかは結局わかりませんでした。
　比較されるとわかると思いました。
div.section ol li div.figure div.figcaption{position:absolute;}
1)絶対配置にして親ブロックから独立させないとならないこと
2)そのときの基準は、直近のsttic以外の親コンテナブロック
だけです。
9.6 絶対配置( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　そのためには、HTMLが文書構造をきちんとマークアップされていないとならない。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　ということ。
　再度、ソースを確認して、firefoxのfirebugなどを用いてもひとつひとつのスタイルシートの意味を再確認してください。それが手間のようでも最も早く上達できる。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/02/02 09:52

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報