出現在不透明圖像鏈接上的灰盒子

Stack Overflow的第一個問題，所以如果我錯過了任何你需要的東西，我會盡我所能提供它。出現在不透明圖像鏈接上的灰盒子

基本上我有一組圖像，充當鏈接到網站，當你將鼠標懸停在它們上面時，會有一個不透明效果（達到0.7）。這很好，但是當你懸停並且中間出現一個灰色框的不透明度時，我假設這是由於它是一個帶有錨標籤的鏈接。

我的問題是如何擺脫那個灰色框？見下面的圖片和代碼：

HTML的圖像

<div class="col-md-4 centered paddedBottom"> 
       <p class="uppercase">Angela Macaulay Therapies</p> 
       <a href="http://angelamacaulaytherapies.uk" target="_blank">         
       <img src="images/angelamacaulaytherapies.png" /></a> 
</div>

這是對圖像的CSS圖片

#our_work img { 
width:400px; 
height:400px; 
display: inline-block; 
height: auto; 
max-width: 100%; 
}

CSS懸停

#our_work img:hover { 
opacity: 0.7; 
filter: alpha(opacity=100); /* For IE8 and earlier */ 
}

圖像之前HOVER - http://i.stack.imgur.com/Yqx8N.png

HOVER AND GREY BOX圖像 - http://i.stack.imgur.com/VNDjD.png

還有其他需要幫助的人告訴我！

來源

2016-03-28 alex.macaulay

您能爲我們提供更多信息？您的問題不能從您剛給我們提供的代碼中解決。也許在JSFiddle中做一個例子？ – Webber

雖然把你的JSFiddle放在一起，我設法找到問題並修復它！我有一個css風格，改變了懸停的navbar鏈接的顏色，但在那裏它說「a：懸停然後改變顏色」，所以我用導航欄的ID更具體，現在它的工作原理！ From： .dropdown-menu li> a：hover，.dropdown-menu li> a：focus，.dropdown -submenu：hover> a，a：hover {background_color：gray！important; } 到： .dropdown菜單LI>一個：懸停，.dropdown菜單LI>一個：焦點，.dropdown-子菜單：懸停>一個，#main_nav：懸停{ 背景色：灰！重要; } –

因此，根據我上面對Webber的迴應，我發現這個（對我來說）的原因是因爲當更改導航欄懸停效果的顏色時，我也針對所有錨標籤。這通常不明顯，但隨着不透明效果的出現，這變得可見。我改變了我的代碼如下：

來源：

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover { 
    background-color:grey !important; 
}

要：

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover { 
    background-color:grey !important; 
}

來源

2016-03-28 12:32:33

出現在不透明圖像鏈接上的灰盒子

回答

相關問題