Question

我在列表中的链接中有一个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，这个与敲除绑定，它隐藏了其他图像＆＃39; s背景。第一个需要出现在最上面。

Answer 1

所以我在这里做了什么;隐藏a标记以及img内的所有a和li标记。所以在:hover我只是让它可见。

检查 DEMO 。

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

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

列表中的链接中的图像悬停

1 个答案: