列表悬停内链接内的图像答案

【问题标题】：Image within a link within a list hover列表悬停内链接内的图像
【发布时间】：2014-10-01 11:19:00
【问题描述】：

我在列表中的链接中有一个 img：

<li class="list-group-item">
   <a class="video-thumbnail-link" href="javascript:void(0)" data-bind="click: (function(guid){ x.y.z.someFunction(guid); }).bind($data, $data.Guid)">
     <img class ="video-thumbnail-icon" alt="picture" src="/Content/Images/picture.ico" />
   </a>
   <a class="anotherrandomcss" ...>
     <img class="randomcss" ></img>
   </a>
</li>

我希望第一张图片只出现在 .hover 上，但我知道 img 不支持 CSS .hover，所以我将其应用于链接。我的CSS：

.video-thumbnail-icon{
height: 20px;
left: 100px;
position: absolute;
width: 20px;
}

 .video-thumbnail-link {
visibility: hidden;
}

.video-thumbnail-link a:hover {
visibility: visible;
}

这隐藏了我的链接和我的img，但在悬停时，它不会重新出现。

知道我该怎么做吗？

顺便说一句，我不使用背景img 的唯一原因是在同一个li 中，还有另一个img，这个img 与knockout 绑定，它隐藏了其他图像的背景。第一个需要出现在顶部。

【问题讨论】：

src 属性在使用 img 元素时是必需的，否则你会在 safari 中遇到一些问题。
看起来像这样。 jsbin.com/bekarepu/1/edit
@KheemaPandey 有什么区别？它在我的代码中不起作用
悬停时你想显示第一张图片吗？
总是显示第二张图片（我没有显示细节，因为它们处于淘汰状态且无关紧要）。当我将鼠标悬停在第一个或第二个链接上时，第一个图像必须出现在第二个之上

标签： html css hover

【解决方案1】：

所以我在这里做了什么；隐藏a 标记，因为所有img 和a 标记都在li 内。等等:hover 我只是让它可见。

检查 DEMO。

.video-thumbnail-link {
    visibility: hidden;
    }

.list-group-item:hover a {
visibility: visible;
}

【讨论】：