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

【问题标题】：How to add image and change visibility on hover CSS如何在悬停 CSS 上添加图像和更改可见性
【发布时间】：2012-03-30 09:48:21
【问题描述】：

我正在尝试做一些半复杂的事情。我有 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 个轨道，因此内容必须是动态的和可重复使用的。

【问题讨论】：

绝对位置使它无法使用怎么办？您是否将其与固定位置混淆？ Absolute 仍然相对于最近的相对定位的容器，因此没有什么可以阻止您将 position:relative 放在轨道元素上并在功能区上使用绝对位置。
你能发布更多你的css吗？我无法重现您的问题。

标签： html css hover visibility opacity

【解决方案1】：

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

使用以下样式：

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

【讨论】：

【解决方案2】：

我无法重现该问题，as it seems to work fine in this demo（注意：更改了不透明度只是为了使其更明显）。但是，需要注意的一些事项可能会导致问题。

1) 最可能的问题是在a 标记（内联内的块级元素）中包含div 是无效的html，因此某些浏览器可能会遇到问题并且无法正常运行。

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

3) 您是否验证过ribbon.png 本身没有自己的固有不透明度（因为它是 png，它可以在图像本身中具有不透明度）。

【讨论】：