7

ホバーすると、テキスト リンクに下線が表示されます。これは Bootstrap のデフォルトです。

リンクが特定のdiv内にない限り、これを保持したい。

私が試したコード (およびいくつかのバリエーション) は機能しません。

HTML:

        <div class="wall-entry span5">
            <a href="">
            <img src="http://www.placehold.it/290x163" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>
                <p>USA</p>
            </div>
            </a>
        </div>

私のCSS：

.wall-entry     {
                background-color: @black;
                position: relative;

            img {
                opacity:0.4;
                filter:alpha(opacity=40); /* For IE8 and earlier */
                }

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;
                    }
                }
            }


div.wall-entry:hover img    {
                            opacity:1;
                            filter:alpha(opacity=100); /* For IE8 and earlier */                    
                            }

a div.wall-entry {text-decoration: none;}

簡単なメモ: 私はテストしましたa {text-decoration: none;}が、これは機能します。とはいえ、すべてを変えたいわけではありません。この特定のケースのリンクのみ。

4

4 に答える 4

8

最初に、複数の単語を含むフォントの font-family を引用符で囲みます。

font-family: "Neuzit Heavy", sans-serif;

次に下にa置く.wall-entry a:hover { text-decoration: none; }

順序が入れ替わっています。対象とするアイテムは右側にある必要があります。例えば、

.wrapper .header a英語では、「.header 内にある、.wrapper 内にあるすべてのアンカー リンクをターゲットにする」という意味です。

于 2012-04-30T22:04:26.620 に答える
2

問題は実際には、コードではなく、Twitter Bootstrap の CSS ファイルが原因です。

Twitter Bootstrap の CSS ファイル (bootstrap.min.css が私のプロジェクトの犯人でした) は、リンクに複数回下線を付けます。カーソルを合わせたときやフォーカスしたときに下線が引かれ、さらに青く表示されます。

私のプロジェクトでは、アンカー タグ内のテキストに独自の色を明確に割り当てました。ブラウザーは割り当てたとおりに色を正しくレンダリングしましたが、テキストがアンカー タグでラップされていたため、 Twitter Bootstrap スタイルシートは、すべてのスタイル付きテキストの下に表示されたままです。

私の解決策：bootstrap.min.css（またはBootstrapスタイルシートが呼び出されたもの）を開いて「下線」という用語を検索し、アンカータグセレクター内に「text-decoration：下線」が見つかったら、次のようにします：

a:hover, a:focus {
  color: #2a6496;
  text-decoration: underline;
}

またはこれ：

      a, a:visited {
    text-decoration: underline;
  }

先に進んで、色とテキスト装飾の規則を削除する必要があります。

それは私の問題を解決しました。

于 2014-06-30T22:10:12.947 に答える
0

リンクが div タグ内にある場合は、次の方法でリンクを選択できます。

div > a:hover {
  text-decoration:none;
}

ブーストラップを使用しても問題なく動作します。

于 2016-10-27T22:47:07.660 に答える
0

これはうまくいきません

a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry

しかし、これはうまくいきます。

div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'

aタグに がついているからtext-decorationです。

于 2012-04-30T22:07:27.710 に答える