Movabletype 3.36にてサイトを制作しています。

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

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

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

回答の条件
  • 1人2回まで
  • 登録:2008/05/21 20:24:56
  • 終了:2008/05/21 23:49:39

ベストアンサー

id:m_nagase No.1

nagase回答回数58ベストアンサー獲得回数82008/05/21 23:11:01

ポイント100pt

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要素中のアンカー要素にのみスタイルを適用することが出来ます。

id:ga-ya

最終的に、

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

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

2008/05/21 23:47:27

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

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

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

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

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