CSS-ターゲットテキストのリンクは、ホバー上の下のボーダーとリンクしますが、ボーダーのない画像リンク

Question

CSSのテキストリンクを、ボーダー上でホバーの にターゲティングすることはできますが、ホバー上のボーダー。だから、：

<a href="#"><img src="image.png" /></a> ==> this should not have a bottom-border on hover 
<a href="#">regular text link</a> ==> this should have a bottom-border on hover 

私はこのCSSを試してみました：

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a:hover img { 
    border-bottom: none; 
} 

しかし、これは動作しません...アンカーではなく、画像よりも標的にする必要があり、私は思います。私はGoogleの周りで狩りをしてきましたが、特定のクラスやIDで画像リンクをターゲティングしたり、display：blockを使用したりする以外は、どのようにしてこの操作を行うのかわからないようです。

しかし、これらのソリューションはコンテンツがCMSにあるため使用できないため、ユーザーが挿入する各イメージにクラスを割り当てる必要はありません。表示：ブロックが機能しない理由は、ユーザーが表示したいすべての画像に適しているかどうかわかりません。

最後に、私はプレーンなCSS（Javascriptなし）でこれを行うことができるようにしたいと思います。おそらく方法はありません...しかし、あなたが持っているどんな助けやアイデアも非常に高く評価されます！

Answer 1

、何をしたいと思うことのいくつかの種類である：子を選択しますが、残念ながら（いなくてもCSS3には）存在しない親、親に適用される疑似クラス。その後、彼らは子IMG要素を持っていないことを条件に、赤い下の枠線を適用し、を置く：

あなたは#sidebar に一致するすべての要素を選択し、Javaスクリプトのビットを行う必要があるだろう。

Answer 2

純粋なCSSでは、新しいタグを追加することなくこれを行うことはできません。 純粋なCSS/HTMLでこれを行うには、画像の[a href]リンクにタグを追加するか、アンダーラインで表示したい[a hrer]リンクにタグを追加する必要があります。

JavaScriptのコードを書くと、ホバー上の要素の境界線のプロパティを非常に簡単に変更できます。その要素がIMGであるかどうかを確認するだけです。

Answer 3

これは実際にはかなり難しい問題です。 CMSのコードを変更する能力はありますか？リンク内の任意のテキストの周りに<span>をラップするようなことができれば簡単になります。そして、境界線を持つターゲットは#sidebar a:hover spanです。

コードを変更できない場合は、これが可能かどうかはわかりません。私は何も思い付きません。

Answer 4

子要素の種類に応じて要素をターゲティングすることはできないため、異なるリンクをターゲットにするためにコードに何かを追加する必要があります。

下枠の代わりに下線を使用できませんか？リンク要素自体ではなく、リンク内のテキストに適用されるので、これは機能します。申し訳ありません

#sidebar a:hover { text-decoration: underline; } 
#sidebar a:hover img { text-decoration: none; } 

Answer 5

これは、これは、それがピクセルほど永久下方に変位することになるが、画像は、境界をカバーするであろう

a img {position:relative; top: Npx}, where N is the hover border thickness 

働くかもしれません。

Answer 6

このトリックを試してください。できます。

a { text-decoration:none; border-bottom:2px solid; } 

a img { border:none; vertical-align:top; } 

もう一つの方法 - PHP：限りJavaScriptが行くように

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text); 

Answer 7

、私は画像が含まれているすべてのリンクにクラスを追加するjQueryを使用することをお勧めしたい：

$('#sidebar a:has(img)').addClass('image-link'); 

（:hasセレクタはjQueryのもので、CSSでは存在しません）

それに応じてスタイルシートを調整します。

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a.image-link:hover { 
    border-bottom: none; 
} 

Answer 8

a:not(img) a:hover {style:whatever;}を使用するcss3で可能ですが、考慮事項があります。ここでは画像と説明です：：http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 9

簡単な方法は、また

text-underline-position 

http://dev.w3.org/csswg/css3-text/#text-underline-position0