Question

我正在尝试做一些半复杂的事情。我有4个链接的图像。当我将鼠标悬停在图像上时，我希望不透明度变为0.7。我还想在您悬停该图像时显示一条色带。这是我正在使用的代码

<div id="tracks-content">
    <div class="track enrolled">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track1.png" /></span></a>
       <h3>Track title 1</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
    </div>
    <div class="track unavailable">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track2.png" /></span></a>
       <h3>Track title 2</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
   </div>
</div>

因此，如果我将鼠标悬停在图像上为track1.png，那么我希望track1.png调暗到70％，我希望ribbon.png的可见性从隐藏变为可见。我一直遇到一个问题，即图像的不透明度也应用于色带。在图像中，您可以看到当我悬停第一张图像时，功能区出现但也获得了不透明度。查看图片http://img.photobucket.com/albums/v513/Tearyguitarist/example.png

的链接

这是我正在使用的CSS

#tracks-content .enrolled a:hover > .ribbon{
    visiblity:visible;
}
#tracks-content .enrolled a:hover span img{
    outline: solid 1px #40a304;
    opacity:0.5;
}

有什么建议吗？我不能使用任何绝对位置，因为整个页面是由PHP驱动的，可以有1或10个轨道，所以内容必须是动态的和可重复使用的。

Answer 1

我无法重新创建问题，as it seems to work fine in this demo（注意：不透明度只是为了让它更明显而改变了）。但是，需要注意的一些事情可能会导致问题。

1）最可能的问题是在div标记（内联中的块级元素）中有a是无效的html，因此某些浏览器可能遇到问题，运作不正确。

2）如果您的上述css反映了您的真实css，那么在将visibility设置为ribbon时，您拼错了visible（“可见性”）。

3）您是否确认ribbon.png本身没有自己的固有不透明度（因为它是png，它可能在图像本身具有不透明度）。

Answer 2

删除你的代码，尝试用一些填充边框而不是使用轮廓

使用以下样式：

#tracks-content .enrolled a:hover span img{
    border: solid 1px #40a304;
    padding:1em;
    opacity:0.5;
    *filter: alpha(opacity=50);
}

如何在悬停CSS上添加图像和更改可见性

2 个答案: