マウスをのせると画像が動くcssについて

締切済

質問者：sio2a
質問日時：2014/03/07 18:44
回答数：1件

マウスをのせると画像が動くCSSについて質問します。

http://kumacrow.blog111.fc2.com/blog-entry-486.h …

このページに書いてあることをやりたいです。
通常ですと、<head>内にCSSを記入して、html内でclassで呼び出すと思うのですが、html内に全て書く場合はどうすればいいのでしょうか？

<a href="http://～" style=" a:hover { position: relative; top: 5px; left: 5px;}"><img src="（画像のある場所）" /></a>

このような書き方では上手くいきません。
どのように書けばいいのか教えてください。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1

回答者： ORUKA1951
回答日時：2014/03/07 20:03

:hoverは、動的な擬似クラスですので、描画された後に始めて実態になるためstyle属性にはかけません。

擬似クラス(::first-child)、リンクの擬似クラス(:link、:visited)、動的な擬似クラス(:hover、:active、focus)、および擬似要素(:before、:after)
　はそれによって要素を探すのですから・・・

なお、
＞html内でclassで呼び出すと思うのですが、
　それは間違いです。class名は関係ありません。
★スタイルシート--言い換えればプレゼンテーションのためにHTMLを書いてはなりません。!!スタイルシートを導入する最大の目的が「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」なのです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

下記添付の画像を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">

＿</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>