• 締切済み

リストマークにホバー効果

ttp://liquidfolio.queldorei.com/features/post-formats/ こちらのページにあるリストマークの部分が、ホバーによって拡大縮小されているのですが、仕組みが全く判りません。 どなたか判る方居ましたら、よろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

様々な方法で実現できますので、ごく簡単な例をCSS2.1の範囲で、 HTMLは、本文セクション内にあるナビゲーションブロックだとします。 すなわちDOMは body 　|-- div .header 　|-- div　 .section 　|　　|-- div　　.nav 　|　　　　　|-- ul 　|　　　　　　　|-- li 　|　　　　　　　|　　　|-- a 　|　　　　　　　|-- li 　|　　　　　　　・・以下略・・ 　|-- div　　.footer div.section div.nav ul li{ list-style-image:url(); } div.section div.nav ul li:hover, div.section div.nav ul li:focus{ list-style-image:url(); } が基本形です。 [サンプル] ★HTML4.01strict+CSS2.1のウェブ標準(IE8以降) ★タブは＿に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;} div.section p{margin:0 200px 0 0;text-indent:1em;line-height:1.6em;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:900px; margin:0 auto; padding:5px; } div.section{min-height:400px;position:relative;} /* ここから */ div.section div.nav{width:200px;height:100%;position:absolute;top:0;right:0;} div.section div.nav ul li{ list-style-image:url(./images/navi/redN.gif); line-height:20px; } div.section div.nav ul li:hover, div.section div.nav ul li:focus{ list-style-image:url(./images/navi/redH.gif); } div.section div.nav ul li:hover:after, div.section div.nav ul li:focus:after{ content:"　　←今ここだよ"; } /* 色塗り */ body{background-color:gray;} div.section{background-color:silver;} div.header,div.footer{background-color:white;} div.section div.nav{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>20px角のふたつの透明化GIF./images/navi/redN.gifと中心の赤丸の大きい./images/navi/redH.gifを用意する。</p> ＿＿<p>hover時点で画像を切り替える。</p> ＿＿<p>スムーズに伸張したい場合は、CSS3のtransformを使用しても良いが、色々と複雑になる。</p> ＿＿<p>なお、ページはリキッドですからスマホから幅広ディスプレイに対応ししてます。</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>リンク</li> ＿＿＿＿<li>リンク</li> ＿＿＿＿<li>リンク</li> ＿＿＿＿<li>リンク</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

単純に <ol> 　<li>あいうえお</li> 　<li>かきくけこ</li> 　<li>さいすせそ</li> 　<li>たちつてと</li> 　<li>なにぬねの</li> </ol> なら、 セレクタ{list-style-image:url();} と セレクタ:hover,セレクタ:focus{list-style-image:url();} で良いですよ。 他にボーダーを指定したり、内容の追加でマークを表示させたり・・ 動的な擬似クラスを使用します。マウスポインター以外のホーカスも考慮して:focusも指定しておきましょう。 動的疑似クラス: :hover、:active、:focus( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#dynamic-pseudo-classes )

Minami_0777
質問者

補足

上記のサイトをソースを除いたのですが、 :hover、:active、:focusのみではなく .entry-content ol li { line-height:1.7;} .entry-content ul li { line-height:1.7;} li a { 　　　-moz-transition: all .8s; 　　　-webkit-transition: all .8s; 　　　-o-transition: all .8s; } li a:hover { -moz-transition: all .05s; 　　　　-webkit-transition: all .05s; 　　　　-o-transition: all .05s; } ul.qd_list { list-style: none; padding:0;} ul.qd_list li { position: relative; padding-left: 20px;} と、いうCSSに加え、何かjqueryのような物で動作しているのですが、 その辺の仕組みの理解に苦しんでいます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • リストマークの位置がずれている　リストの文字が複数行になった時

    IEとfirefoxで、リストマークの見え方が違ってしまってます。 例えば、 http://fortunehills.web.fc2.com/ のページにリストの表示があります。 画面左上に 「2009/6/30 火曜日」とありその下に、 株式のチャートアイコンがあり、その上にマウスを乗せるとズラリとリストがでます。 そのリストの２番目 「日興コーディアル証券｜オンライントレード（日興イージートレード） 」というのがあり２行になってます。 で、そのリストマークが２行目の横に来てしまってます。下揃えになってます。 他にも、同じＵＲＬの news内の「perfumelab」のリストマークも下揃えになてます。 IEで見ると下揃えなのですが Firefoxでみると、上揃えです。 IEでも上揃えにするには、どのようにするのが良いのでしょうか？ 原因などが何かあるのでしょうか？

    • ベストアンサー
    • HTML
  • Rマーク　規定サイズに関して

    Rマークに関してご質問があります。 現状、お客様からイラレデータで、縮小とアウトライン化されたのを頂き、拡大して出力を依頼されました。 （縦横比そのまま、拡大率1250％） しかし、Rマークを拡大すると、線が細くなってしまいました。 根本的な質問ですが、これではダメですよね？ それとも拡大しなくてもいいのですか？ 拡大するなら仕方を教えてください。 恐らく拡大する際の設定だとは思いますが、 何分不慣れなのと重要な部分なのでへたにデータをいじれなくご質問をさせて頂きました。

  • 終了マーク「×」が化けている。

    ウィンドウを閉じる「×」が変な数字みたいなものに化けています。その他、ウィンドウを拡大、縮小するマークも数字の「２」に化けていたり、チェックマーク（アンケート等でクリックすると、チェックマークが入るアイコン）も変な絵に化けています。 システムの修復で１ヶ月位前の状態に戻しても直りません。 分かる方がいれば直し方を教えて下さい。

  • こんな隠しページ

    ttp://kenihisu.fc2web.com/ugtool.htm (hは消しています。) 普通隠しページといったら文字を隠していたり、リストマークにリンクされていたりというのが多いのですが、このように隠しページへいけるようになっているサイトを見るのははじめてです。 隠しページというのは「自分で行くのが原則」と思いますが、行き方やヒントを教えてください

  • ページ全体の拡大／縮小が行える、JavaScriptのサンプルを教えていただけますでしょうか？

    ページ全体の拡大／縮小をJavaScriptにて行いないたい（対象はIEのみ）のですが、検索をしてみると、「文字サイズの拡大／縮小」や「画像の拡大／縮小」はよく見つかるのですが、ページ全体の拡大／縮小のサンプルを掲載しているページはあまり見かけません。 検索（"ページ ズーム javascript"等のキーワードで）で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML＋CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML＋CSSの見直しも色々行ってみたのですが、なかなか改善されません。 みなさんがご存知のJavaScriptのサンプル（ページ全体の拡大／縮小）が掲載されているURLを教えていただけますでしょうか？ 教えていただいたサンプルを実装し、色々探ってみたいと思っています。 ※ちなみに、イメージは↓このような感じです。 http://appleworld.com/4tr/

  • ブラウザ（ＩＥ）のツールバーに文字を拡大縮小できるツールを加えたい

    こんにちは ブラウザにＩＥ６を使っていますが、ツールバーの中に、表示されるウエッブページを縮小表示したり拡大表示したり出来るツール（プルダウンリストの％数字を選び縮小・拡大する）を加えたいのですがどうすればいいのでしょうか？ （友達のＩＥ６ではこうなっていました。） よろしくお願いします。

  • ×マークを消したいのですが

    アクセス解析のＣＧＩを設置したんですが、非表示のはずなのに×マークが見えてしまってます。 この×マークをみえないようにしたいのですが、判る人教えて下さい。 配布元　http://www.suepon.com/　simple_access v.1.0 アクセス解析するページへの記述 <script>document.write('<img src="../access/access.pl?',parent.document.referrer,'">')</script> ↑ この部分が×マークが出てしまいます。サンプルだとこの呼び出しタグで 真っ白な画面のままです。

    • 締切済み
    • CGI
  • 画像クリック→「部分的に」拡大

    いつもお世話になっています、 http://store.uniqlo.com/L4/getitem.asp?hdnItemMngCD=k36133 このユニクロのページのように「拡大画像をみる」のウインドウの中で好きな場所でクリックすると、その部分だけが拡大して見ることができると思うのですが、これはフラッシュですか？どのような仕組みでしょう？ いろいろ検索してみたのですが、解説のページなどが見つかりませんでした。 ご存じの方がいらっしゃいましたら教えてください！

  • お教えください

    現在WEBサイトを製作しているものですが、作成したサイトの右側のスペースに「グランドハイアットトーキョー」ttp://www.grandhyatttokyo.com/swf/index.html　のサイトのように、全ページに色を塗りたいです。どのように設定すればすればよいでしょうか？使用ソフトはDreamweaverです。また、グランドハイアット東京のサイトのように、画面サイズを全ページ同じサイズ（画面を拡大しても縮小しても同じサイズ）にするにはどのようにしたらよいのでしょうか？

    • ベストアンサー
    • HTML
  • IEで見ると「構文エラー」になる！原因を教えて！

    IEブラウザで見たときにページ左下に「！」マークで構文エラーマークが表示されます。 ソースの記述部分で何か間違いがあるのでしょうか？ 教えてください！ ▼対象ページ http://www.sanabo.com/kotowaza/arc/2005/12/post.html

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する