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

Movabletype 3.36にてサイトを制作しています。
スタイルシートで
a:hover {background-color: #ffd78c;}
と指定し、リンク部にマウスカーソルが来た時に背景色が変わるようになったところまでは良かったのですが、エントリーのタイトル部にアンカーを引くため
<a name="point1" style="text-decoration:none;" >
タグを使ったところ、被リンクにあたるアンカーポイントまで(マウスオーバー時に)背景色が変わるようになってしまいました。

つまり、アンカーポイントとして指定したいエントリーのタイトルまで「リンク箇所」扱いになってしまっているため、<a name 〜>の箇所だけスタイルシートを外すような指定をしたいのですが、何か対処方法はありませんか?
具体的なタグの記述等を教えていただけると大変助かります。

どなたか詳しい方、どうぞご返答をお願い致します。

●質問者: ga-ya
●カテゴリ:インターネット ウェブ制作
✍キーワード::hover background-color MovableType アンカー エントリー
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● nagase
●100ポイント ベストアンサー

http://www.mozilla.gr.jp/standards/webtips0010.html

CSSの属性セレクタという物を使います。

a[href]:hover {background-color: #ffd78c;}

このように記述すると<a>タグにhrefの属性が指定されている物のみにスタイルが適用されます。

ただし、IE6(IE7は未確認)ではこの属性セレクタはサポートされませんが、

それとは別にIEではhover疑似クラスはhref属性が指定されている物のみ動作するようなので、

結果として目的の動作になると思います。

また、エントリーのアンカー部に適用したくないということならば、エントリーのタイトルがh2要素となっていれば

h2 a,h2 a:hover{ なんらかのスタイル }

というスタイルを記述すれば、h2要素中のアンカー要素にのみスタイルを適用することが出来ます。

◎質問者からの返答

最終的に、

h2 a,h2 a:hover{ なんらかのスタイル }

という方法で、Win/Macともに希望通りの動きになりました。ありがとうございました!

関連質問


●質問をもっと探す●



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