- ベストアンサー
下線（アンカー）の表示を特定の文字のみ設定するには
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
予め分かっている文字列なら、手動でクラスを追加する方法が確実です。 不規則な入力となるなら、jqueryの「txt.replace」を使って文字列を検知して置き換える方法があるかと。 以下はサンプルです。 <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $('a').each(function(){ var txt = $(this).html(); $(this).html( txt.replace(/下線あり/g,'<span>下線あり</span>') ); }); }); </script> <style type="text/css"> a {text-decoration:none;} a span {text-decoration:underline;} </style> <p><a href="index.html">下線あり</a></p> <p><a href="index.html">下線なし</a></p>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
文法末外は置いておいて・・body直下にa要素は置けない。 <div class="nav"> <ol> <li><a href="/">Top</a></li> <li><a href="/Books">Books</a></li> <li><a href="/Manual">Maanual</a></li> <li><a href="contactUs.html">問合せ</a></li> </ol> </div> この場合 a{text-decoration:none;} a+a{text-decoration:underline;} a+a+a{text-decoration:none;} a[href="/Books"]{font-weight:bold;} a:nth-child(2n){font^size:2em;}
お礼
回答頂きありがとうございました。
- torayoshi
- ベストアンサー率62% (910/1449)
こんなことしてみるとか。 a{ text-decoration: none; } .hoge{ text-decoration: underline; } <span class="hoge"><a href="index.html">下線あり</a></span> <a href="index.html">下線なし</a> 段落ならインライン要素をブロックに。
お礼
回答頂きありがとうございました。
関連するQ&A
- マウスカーソルを当てた時だけハイパーリンクの下線を
マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。 今、 <html> <head> <title>test</title> <style type="text/css"> a.{text-decoration: none;} </style> </head> <body> <a href="http://www.yahoo.co.jp/">yahoo</a> </body> </html> というコードですが、 まず、a.{text-decoration: none;}をしてるのに、リンクに下線がついてしまいます。 a.{text-decoration: none;}が間違っていると思うので、 マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。 更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、 その方法も併せてご教授お願いします。
- 締切済み
- CSS
- ～マウスオンしたときに下線を表示させたい～
すみません。教えてください。 リンク先の下線を消す場合、要素に直接書くときは下記のように書けばいいのですよね。 <a href="リンク先" style="text-decoration:none;">文字</a> マウスオンしたときだけ下線を表示させる場合はどうしたらいいのでしょうか。 お分かりの方宜しくお願いします。
- ベストアンサー
- HTML
- リンク文字変化のタグについて
リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。 色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]～[/head]の間に注入するタグのようなのですが <STYLE type="text/css"> <!-- A:HOVER{ position : relative; top:3px; left:3px;} A{text-decoration : none; } --> </STYLE> このように[head]～[/head]の間に挿入するタイプのものではなく 個別で指定するにはどのように記述すればいいでしょうか？ ↓例えばコレは[head]～[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- リンクの下線や色の指定を特定のところだけ設定したい
HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ 下線を付けない onMouseの時だけ下線を付ける 色をデフォルト以外の色を付ける ようにしたいのですが、どのようにしたらいいでしょうか。 たとえばこの下はむちゃくちゃですが、 .link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }} こんな感じでスタイルシートに書いて <a href="xxxx.html"><span class="link">click</span></a> みたいな感じでも少しずつ変えながらいろいろ試してみたのですが 色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。 どうすればよいかご存じの方ご教授ください。
- ベストアンサー
- HTML
- マウスを重ねたら下線が出る
マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか？ <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>
- 締切済み
- HTML
- スタイルシート
こんばんは。HPを独学で作っている超初心者です。 スタイルシートが反映してくれないのです。下記の記述で 何が違うのでしょうか？？？ ---01.css--- <sytle type="text/css"> a:link{text-decoration:none;} <style> ---index.html（抜粋）--- <head> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうしても index.html のリンク部分に下線が出てきます。 どうして消せないのかが分かりません！！！ どなたか教えてください！よろしくお願いいたします！
- 締切済み
- その他（インターネット・Webサービス）
- テーブル内のリンク下線
テーブル内のリンク下線（多数）を全て消したいのですが、 <table style="text-decoration:none;"> ではできず、 <a href="" style="text-decoration:none;"> と全てに指定しなければなりません。 これはいっぺんに適応はできないものなのでしょうか？
- 締切済み
- その他（プログラミング・開発）
- 外部CSSがうまく表示されません
下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
- 文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが
スタイルシートの定義で質問です。 文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですが やり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。 これだと、ハイパーリンク文字にマウスをおいても白文字のままです。 この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・ ・ </body>
- 締切済み
- HTML
- Operaのバージョン９でa:hover { text-decoration: underline; }が動作しない
Operaのバージョン９で以下のCSSが正常に動作しません。 症状：リンクにマウスオーバーしても下線が表示されない。 使用OS：Windows XP SP2 <html> <head> <style type="text/css"> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> </ul> </body> </html> この問題を解決するにはどうすればよいのでしょうか？ ご存知の方がおられましたらご回答をよろしくお願いします。
- 締切済み
- HTML
お礼
回答頂きありがとうございました。