Question

我有以下HTML和CSS代码：

HTML:
<a href="http://www.google.com/" target="_blank"><img src="image.jpg" /></a>

CSS:
a:hover {
border-bottom:1px solid #000;
}

问题是，只有当封闭的链接不是图像时，a-Tag才会在悬停时添加边框。

边框不在图像上，它在a-Tag上...我该如何解决？

有解决方法吗？

Answer 1

a img, a img:hover { border:none; }

如果您只有一个带有图片的标签，则可以使用ID

#myImageATag, #myImageATag:hover{
   border:none;
}
<a id="myImageATag"></a>

如果您想申请其他许多人，可以使用class

.linksWithImages, .linksWithImages:hover{
        border:none;
}

我不知道你是否可以使用Jquery，但这是一个检查是否有图像然后删除边框的解决方案。如何检查a标签在jQuery中是否有下面的图像

$('a').each(function() {
    if ($(this).find('img').length === 0) {
        $(this).css("border", "none");
    }
});

Answer 2

CSS无法做到这一点，但Jquery可以轻松地帮助您：

$(document).ready(function(){
  $("img").parent("a").css( "border-bottom" , "none" );
});

在此测试：http://codepen.io/anon/pen/zGZbVj

Answer 3

使用以下CSS作为锚图链接：

import pandas as pd
...

def features(p):
    terms = vectorizer(p[0])
    d = {'feature_1': p[1], 'feature_2': p[2]}
    for t in terms:
        d[t] = d.get(t, 0) + 1
    return d

posts = pd.read_csv('path/to/csv')

# Create vectorizer for function to use
vectorizer = CountVectorizer(binary=True, ngram_range=(1, 2)).build_tokenizer()
y = posts["score"].values.astype(np.float32) 
vect = DictVectorizer()

# This is the part I want to fix
temp = zip(list(posts.message), list(posts.feature_1), list(posts.feature_2))
tokenized = map(lambda x: features(x), temp)
X = vect.fit_transform(tokenized)

如果链接是图像，则从a-Tag中删除边框

3 个答案: