3

Web サイトのリンクに、フォントの色とは異なる色の下線を付けるように指示されました。border-bottomリンクされた画像にも下線が引かれていることを除いて、以下のように使用すると、すべてが非常に簡単に見えました.

JS を使用せずに発生を停止する方法はありますか?

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}

例-下の画像にカーソルを合わせると、border-bottomCSSスタイルが追加されますが、これは望ましくありません-

<a title="Dyne Drewett" href="http://test.dynedrewett.com">
    <img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
4

7 に答える 7

2

技術的には、含まれる要素に基づいて要素にスタイルを設定することはできません。a要素の境界線を内部の要素の存在に依存させることはできませんimg（これがあなたが扱っているものです）。クラスを使用すると役立ちますが、コメントからは、これは問題外のようです。

回避策があります。各画像を含む要素の下部に配置し (デフォルトのベースラインではなく)、1 ピクセル下に移動するか、境界線の幅が何であれ、下に移動します。このようにして、画像に透明度がない場合、画像は下の境界線を覆います。CSS コード:

a img {
    vertical-align: bottom;
    position: relative;
    top: 1px;
}

これにより、すべての画像の位置がわずかに変わるため、予防策を講じないと全体のレイアウトに影響を与える可能性があります。

于 2013-04-22T13:50:01.730 に答える
1

ソリューションでは、画像をラップするリンク (または境界線を削除する必要があるもの) に追加のクラス名を追加する必要があります。JavaScript の手法を使用しない限り、「逆選択」のような方法はありません。

jQuery の手法は次のようになります。

$('a > img').parent().css('border-bottom', 'none');

これにより、画像を直接の子孫として持つすべてのアンカー タグから「border-bottom」スタイルが削除されます。ただし、すべてのページでそれが必要になり、すべてのページがこのスクリプトによって解析されるため、各ページでオーバーヘッドが少し追加されます。

それ以外の場合、HTML にアクセスできる場合は、次のような特定のリンクを対象とする CSS クラスを作成します。

a.img-link{ border-bottom:none; }

そして、次のような画像の周りにあるリンクに適用します。

<a href="#" class="img-link"><img src="#" alt="" /></a>

それが役立つことを願っています！

于 2013-04-22T13:33:37.290 に答える
1

これを実現するもう 1 つの方法は、単純にリンク内の画像を作成しrelative、下部をオフセットして境界線を覆うことです。5pxはそれを行うようですhttp://jsfiddle.net/ECuwD/

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}

a img {
    position:relative;
    bottom: -5px;
}
于 2013-04-22T13:40:27.880 に答える
1

リンクにクラスを追加することをお勧めします。

a.imglink:hover{
  border:0;
}

または、そのクラスを制御できない場合は、画像に負のマージンを追加して、境界線が表示されないようにすることができます。

a img{
    margin:0 0 -1px 0;
}

その -1px は、他のルールに基づいて調整する必要がある場合があります

負のマージン ソリューションを示すフィドルを次に示します: http://jsfiddle.net/QRXGe/

于 2013-04-22T13:18:26.237 に答える
0

どうやら、あなたが望むのは、同じマークアップ ( <a>) のコンテンツに基づく異なる動作です。

残念ながら、純粋な CSSでこれを行う実際の方法はありません。この言語はプログラミング言語ではないため、.if

それは解決策がないという意味ではありません！できることは次のとおりです。

  1. 要素 ( ) を別の方法で処理する必要があることを HTML で宣言 (たとえば) します<a>(クラスを使用して、この場合は<a class="text">または<a class='image'>.

  2. JavaScript を使用してスタイルを動的に変更します。つまり、コンテンツなどの条件に基づいて変更します。あなたの場合、おそらく次のようになります。

    function onLoad() {
    for (var element in document.body) {
        // look for links
        // if this is a link:
            // look for image inside link
            // if there is one:
                // remove the border
    }
}
于 2013-04-22T13:33:54.770 に答える