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

締切済

質問者：Minami_0777
質問日時：2014/02/24 13:45
回答数：2件

ttp://liquidfolio.queldorei.com/features/post-formats/

こちらのページにあるリストマークの部分が、ホバーによって拡大縮小されているのですが、仕組みが全く判りません。

どなたか判る方居ましたら、よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/02/24 18:41

様々な方法で実現できますので、ごく簡単な例を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">

＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/02/24 14:20

単純に

<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/CSS … )

この回答への補足

上記のサイトをソースを除いたのですが、
: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のような物で動作しているのですが、
その辺の仕組みの理解に苦しんでいます。