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

cssの質問です。
<style type="text/css">
a:hover { text-decoration: none; }
</style>
これをhtmlのaタグに直接記述したいですがどのように書けばいいですか?
<a href="#" style="text-decoration:none;">xxx</a>
みたいな。
よろしくお願いします。


●質問者: wsapp
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

:hover は、疑似クラスと呼ばれる指定ですけれど、style 属性では書くことができません。

特定の A タグの :hover にだけスタイルの指定をしたい、ということだと思うので、クラスの指定をあわせて書けば良いでしょう。

<style type="text/css">
/* .hoge の指定をする */
a.hoge:hover {
 text-decoration: none;
}
</style>

<a href="#" style="text-decoration:none;">xxx</a>
<a class="hoge" href="#" style="text-decoration:none;">xxx</a> <!-- これにだけ効く -->
<a href="#" style="text-decoration:none;">xxx</a>

wsappさんのコメント
ご回答ありがとうございます。 実は・・・、 HTMLコードをphpで作成して他人のブログに張ってもらおうと考えており、Wordpressで作った自分のブログでテストしています。 >|| <a href="#" style="text-decoration:none;">xxx</a> ||< とスタイルを指定しても下線が消えませんし、margin:0;padding:0; を指定してもiマークの位置がずれてしまいます。 外部ファイルで :link, :hover などが指定してあったのでこれを継承しなければ・・・と考えました。 http://q.hatena.ne.jp/1429708544 の質問の続きのようなものですが、iマークを定位置へ表示する妙案はありませんか? よろしくお願いします。

a-kuma3さんのコメント
ああ、なるほど。 事情は察しました。 >> >|| <a href="#" style="text-decoration:none;">xxx</a> ||< とスタイルを指定しても下線が消えませんし、 << :link はまだアクセスしたことがない URL のリンク、:hover はカーソルがリンクの上に乗ったときの状態に対するスタイルの指定で使います。 下線が消えない、とは、直接関係がないような。 想像だけですが、CSS でこんなのがあるとか。 >|css| A { text-decoration: underline !important; } ||< CSS で !important の指定があると、要素の属性で指定したものよりも強いです。 位置がずれることについては、ちょっとこれだけでは何とも。 実物が見られると話が早いんですが。 そのテストをしてて上手くいっていない Wordpress のサイトの URL って公開できたりしますか? すぐには手を出せないかもしれませんが、ぼくの他にもそういうのが得意な人が数人いるので。 その人たちにとっても、上手くいってない現物を見られた方が的確なアドバイスができると思います。

wsappさんのコメント
!important バッチリありました。 だからstyle属性で指定してもビクともしなかったんですね。 実物をはてなにリンクしてもいいのか解りませんので、Wordpressで作った実物と同じサンプルをこしらえて仮のURLでオンライン上にアップいたします。 そこでまたあらためて質問いたします。 そして、アップしたことをコメントでもお知らせします。 その時は、お手数かけますがよろしくお願いします。 ありがとうございましたm(_ _)m

wsappさんのコメント
新しく質問を追加いたしました。 http://q.hatena.ne.jp/1433319012 お手すきの時に目を通していただければ幸いです。 いつもありがとうございます。
関連質問

●質問をもっと探す●



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