人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: mmk1632
●カテゴリ:はてなの使い方
✍キーワード:BODY diff はてなアンテナ アドバイス クリック
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 186
●500ポイント

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.で紹介した私のアンテナでやっています。

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

http://hp.vector.co.jp/authors/VA022006/css/selector.html

セレクタ - CSS2リファレンス

http://www6.plala.or.jp/go_west/nextcss/guide/selector.htm

セレクタ - CSS Dencitie

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

◎質問者からの返答

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

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

>1.

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

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

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

>リンク

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ