• 締切済み

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

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

みんなの回答

  • 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のような物で動作しているのですが、 その辺の仕組みの理解に苦しんでいます。

すると、全ての回答が全文表示されます。

関連するQ&A