從錨標記中的圖像中刪除邊框

所以..我添加了一個底部邊框到我的錨標記，使它們脫穎而出。但是我也有一些圖像也是通過錨標籤扭曲的。事情是，我不知道如何從圖像中刪除邊框。從錨標記中的圖像中刪除邊框

請注意，我使用WordPress的，我不能編輯如何鏈接和圖像顯示

這是我的CSS代碼：

.entry-content a { 
padding:0 3px; 
color: #104273; 
border-bottom:2px solid #104273; 
}

我的問題是，這是有什麼辦法可以做出這樣的事情？

.entry-content a img { 
border:none; 
}

那麼它只是從鏈接的圖像中刪除邊界？

http://codepen.io/andornagy/pen/sdzBq

來源

2014-02-27 Andor Nagy

你可以給我們一個小提琴看到或檢查？ –

嗯，是的，這是可能的，你的代碼看起來不錯。你試過了，結果是什麼？請注意，您不應該使用'！important'設計...並且在這種情況下您實際上不需要它，因爲您的第二個選擇器比第一個選擇器具有更大的特異性，'！important'是多餘的。 –

我添加了一個codepen demo –

您所遇到的問題是，你的造型錨標記，然後試圖覆蓋上<img>標籤，它實際上並沒有樣式被應用到它這種風格，而是它是父母。

如果你不想使用Javascript，你可以將你的文本包裹在<span>標籤和樣式中，而不是錨本身。

HTML

<a href='#'><span>This is a blank Link</span></a> 
<a href='#'><img src="..."></a>

CSS

a { 
    padding:0 3px; 
    color: #104273; 
    text-decoration:none; 
} 
a span { 
    border-bottom:2px solid #104273; 
}

這裏是它在行動小提琴：http://jsfiddle.net/xVSA9/

UPDATE

好吧，這裏是使用jQuery的parent()的解決方案塞萊構造函數。

$('img').parent('.entry-content a').css("border-bottom", "none");

離開你的CSS/HTML相同，這應該工作得很好。

這裏是一個小提琴：http://jsfiddle.net/GeR85/

來源

2014-02-27 17:43:55

邊框仍然是圖像。因爲我使用WordPress，所以我無法真正添加span標籤。 JS方式是什麼？ –

@ And0r1995現在正在處理這個問題...敬請期待 –

有沒有什麼方法可以去除懸停時的背景顏色？ –

假設你的HTML如下所示：

<div class="entry-content"> 
    <a href=""><img src=""/></a> 
</div>

圖像是錨的直接孩子，所以你可以在使用「直接孩子的選擇比符號更多的CSS。

.entry-content>a>img{}

我喜歡在製作菜單時使用有序列表，因爲它在名稱中。他們有組織哈哈。

<ol id="menu"> 
    <li> 
     <a href=""><img src=""/></a> 
    </li> 
    <li> 
     <a href="">This is a blank link</a> 
    </li> 
    <li> 
     <a href="">Another link</a> 
    </li> 
</ol>

CSS

img{ 
    border:1px solid #000000 
} 
ol#menu{ 
    list-style-type:none; 
    margin:0px; 
    padsding:0px; 
} 
ol#menu>li{ 
} 
ol#menu>li>a{ 
    display:block; 
    padding:10px 5px; 
    font-size:20px; 
    text-decoration:none; 
    border-bottom:1px solid #000000; 
} 
ol#menu>li>a>img{ 
    border-bottom:none; 
}

避免使用!important。

來源

2014-02-27 17:44:50 sourRaspberri

你走了...:)

的HTML：

<div class="entry-content"> 
<a href="#">test</a> 
<a href="#"> 
    <img src="https://www.google.co.il/images/srpr/logo11w.png" /> 
</a> 
</div>

的CSS：

.entry-content a:not(a img) { 
padding:0 3px; 
color: #104273; 
border-bottom:2px solid #104273; 
}

中的jsfiddle：

http://jsfiddle.net/3RJ3Q/2/

來源

2014-02-27 17:47:02

從錨標記中的圖像中刪除邊框

回答

相關問題