はてなアンテナで更新記事(.diff)にオンマウスすると、

背景とは別の記事を読むに適した外部画像を更新記事(.diff)内だけに
適用出来るスタイルを分かる範囲で色々と試してみたのですが
サッパリ上手くいきません。
出来そうで出来ないのですが、
「こうすれば…」というアドバイスをお願い致します。

また、全体にリンククリック前後設定をbodyで書いた後に
<h1></h1><h2></h2>等の有効な範囲だけに
個別にリンクに関わる動作を定義する事は可能でしょうか?
こちらも併せてよろしくお願い致します。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/06/28 09:53:48
  • 終了:--

回答(1件)

id:smoking186 No.1

186回答回数74ベストアンサー獲得回数62005/06/28 11:12:55

ポイント500pt

http://a.hatena.ne.jp/smoking186/

はてなアンテナ - 186*100

1. .diffに:hover

p.diff {background-image: url(”aaa.png”);}

p.diff:hover{background-image:url(”bbb.png”);}

ということでしょうか?

似たようなことを実際に私のアンテナでやってみました。ご参照下さい。

しかし現時点ではFirefox (Gecko系), Opera, Safari等のブラウザしか適用できません。


IEの場合は

 ・JavaScriptを使う

 ・自分でcssを追加する

といった選択肢があります。

しかし、これはご自分が使われるIEにのみ有効で、他の人のIEには有効となりません。


IEでa要素以外に:hoverを使おうと思うと,

http://digibot.jp/blog/archives/2005/05/iehovera.html

WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる

のようなcsshoverというスクリプトを使うのが一番楽です。

ただし、はてなアンテナの場合、XSS対策にbehaviorが使えませんので却下となります。


従ってTrixieの様にUserJavaScriptを使えるものをインストールしご自分でUserJavaScriptを書くということになります。


2. h1やh2中でのリンクのみ特殊な設定を

実例を出します.


a:link { color: gray;}

a:hover { color: red;}

h1 a:link { color: yellow;}

h1 a:hover { color: white;}


この場合、body中のリンクは灰色で表示されます。

その下にh1 a:linkと書くことでh1中のリンクは黄色で表示されます。

またhoverによって、body中のリンクにマウスカーソルを合わせると赤色になり、

h1中のリンクにマウスカーソルを合わせると白色になります。


同じようなことを1.で紹介した私のアンテナでやっています。

「内容説明」と書かれた部分のリンクはマウスカーソルを合わせると赤色になります。

URLの三番目と四番目はCSS2におけるセレクタの解説です。2.のCSSの指定の意味がこれで分かると思います。

id:mmk1632

丁寧な回答に感謝致します。

早速今まで嫌っていたFirefoxを入れて確認してみました。

>1.

すごいです、見事に説明不足な自分の質問の的を射ています。

今のメインブラウザIE系のSleipnirですので

帰宅しましたらJAVAの事を勉強します!

>リンク

こちらも見事に設定が変わっていますね。

IEでもばっちり表示されています。

悩んでいたので本当に助かりました、

ありがとうございます!500p

2005/06/28 16:13:57

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません