Question

关于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 */
}

之前的图像 - http://i.stack.imgur.com/Yqx8N.png

带有灰色和灰色框的图像 - http://i.stack.imgur.com/VNDjD.png

您需要的任何其他信息让我知道！

Answer 1

根据我上面对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;
}

出现在图像链接上的灰色框与不透明度

1 个答案: