- 締切済み
マウスをのせると画像が動くcssについて
マウスをのせると画像が動くCSSについて質問します。 http://kumacrow.blog111.fc2.com/blog-entry-486.html このページに書いてあることをやりたいです。 通常ですと、<head>内にCSSを記入して、html内でclassで呼び出すと思うのですが、html内に全て書く場合はどうすればいいのでしょうか？ <a href="http://～" style=" a:hover { position: relative; top: 5px; left: 5px;}"><img src="（画像のある場所）" /></a> このような書き方では上手くいきません。 どのように書けばいいのか教えてください。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
:hoverは、動的な擬似クラスですので、描画された後に始めて実態になるためstyle属性にはかけません。 擬似クラス(::first-child)、リンクの擬似クラス(:link、:visited)、動的な擬似クラス(:hover、:active、focus)、および擬似要素(:before、:after) はそれによって要素を探すのですから・・・ なお、 ＞html内でclassで呼び出すと思うのですが、 それは間違いです。class名は関係ありません。 ★スタイルシート--言い換えればプレゼンテーションのためにHTMLを書いてはなりません。!!スタイルシートを導入する最大の目的が「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」なのです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より 下記添付の画像をHTMLと同じ場所にtemplate.jpgとして保存する。 ★タブは＿に置換してあるので戻す。 ★HTML4.01strict+CSS2.1文字コードはShift_JIS ★デザインのためのclass名は書いてない。class名やidは文書構造を示すための物です。 ★使いまわしのソースで申し訳ない。 /* ここからリンクの画像を変更 */以降が方法(スプライトと言う技法) <!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;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.section{position:relative;} div.section div.nav,div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;font-size:0.9em;} div.section div.nav{left:0;} div.section div.aside{right:0;} div.section div.section{width:auto;min-width:0;margin:0 160px;min-height:300px;} div.section h2,div.section p{margin:0 160px;} div.section div p{margin:0;} /* 色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:transparent;} div.section div.aside{background-color:lime;} div.section div.nav{background-color:silver;} div.footer{background-color:fuchsia;} /* ここからリンクの画像を変更 */ div.section div.nav ol{list-style:none;} div.section div.nav ol li{width:100px;height:80px;position:relative;} div.section div.nav ol li a{ display:block; width:100%;height:100%; text-indent:-200px;oveflow:hidden; background-image:url(./template.jpg); } a[href="#section1"]{background-position:-24px -16px;} a[href="#section2"]{background-position:-157px -16px;} a[href="#section3"]{background-position:-294px -16px;} a[href="#section1"]:hover{background-position:-24px -118px;} a[href="#section2"]:hover{background-position:-157px -118px;} a[href="#section3"]:hover{background-position:-294px -118px;} a[href="#section1"]:active{background-position:-24px -217px;} a[href="#section2"]:active{background-position:-157px -217px;} a[href="#section3"]:active{background-position:-294px -217px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section" id="section1"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="section2"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="section3"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#section1">１項</a></li> ＿＿＿＿<li><a href="#section2">２項</a></li> ＿＿＿＿<li><a href="#section3">３項</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足記事</h3> ＿＿＿<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事を書く</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
回答ありがとうございます。 参考にさせていただきます。
補足
色々調べてみて以下のページで解決しました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1022525140 ありがとうございました。