1. 首页
  2. 问题列表
  3. HTML:视频卡img a悬停
提问者：小点点

HTML:视频卡img a悬停


你好，我想要有一个“如何”当我看图片，但心是定位在别处。 错在哪里？

而且我不明白的一点是为什么我的卡宽好像溢出来了？

.card-video {
            width: 305px;
            display: flex;
            flex-direction: column;
        }

        .card-pic img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            max-width: 305px;
            max-height: 170px;
        }


        .card-info-logo {
            position: absolute;
            right: 5px;
            top: -28px;
        }

        .card-info-logo img {
            width: 55px;
            border-radius: 50%;
            border: 4px solid #5e4b55;
        }

        .card-info {
            position: relative;
            background-color: #292828;
            height: 90px;
            padding: 7px 10px 10px 10px;
            display: flex;
            flex-direction: column;
        }

        .card-info-top {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-info .card-info-category {
            color: #546e7a;
            font-size: 14px;
        }

        .card-info .card-info-title {
            color: #546e7a;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .card-info-bottom {
            border-top: solid 1px #44393e;
            padding-top: 7px;
            display: flex;
            align-items: center;
            line-height: 1;
            justify-content: space-between;
        }

        .card-info .card-info-bottom .views {
            color: #546e7a;
            font-size: 12px;

        }

        .card-info .card-info-bottom .date {
            color: #546e7a;
            font-size: 12px;
        }

        .card-pic {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clip-icon {
            position: relative;

        }

        .clip-icon:hover {
            background-color: red;
        }
<div class="card-video">
<div class="card-pic">
    <a href="">
        <img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
        <div class="clip-icon">
            <span class="fa fa-heart"></span>
        </div>
    </a>
</div>
<div class="card-info mt-1">
    <div class="card-info-logo">
        <img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
    </div>
    <div class="card-info-top">
        <div class="card-info-category">Video Category</div>
        <div class="card-info-title">Video Title</div>
    </div>
    <div class="card-info-bottom">
        <div class="views">312K</div>
        <div class="date">16 hour ago</div>
    </div>
</div>
</div>

null


共2个答案

匿名用户

。卡-视频有流向列。 如果你试着像这样放更多的卡片，它总是会像堆叠一样倒置显示出来。 将整个内容包装在div中，并提供flow-direction:row和flex-wrap:Wrap以获得所需的结果。

null

<style>
  .box{ 
    display:flex;
    flex-direction:row;
     flex-wrap:wrap;
  }
  .card-video {
            width: 305px;
            display: flex;
            flex-direction: column;
            margin:0.5rem;
        }

        .card-pic img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            max-width: 305px;
            max-height: 170px;
        }


        .card-info-logo {
            position: absolute;
            right: 5px;
            top: -28px;
        }

        .card-info-logo img {
            width: 55px;
            border-radius: 50%;
            border: 4px solid #5e4b55;
        }

        .card-info {
            position: relative;
            background-color: #292828;
            height: 90px;
            padding: 7px 10px 10px 10px;
            display: flex;
            flex-direction: column;
        }

        .card-info-top {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-info .card-info-category {
            color: #546e7a;
            font-size: 14px;
        }

        .card-info .card-info-title {
            color: #546e7a;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .card-info-bottom {
            border-top: solid 1px #44393e;
            padding-top: 7px;
            display: flex;
            align-items: center;
            line-height: 1;
            justify-content: space-between;
        }

        .card-info .card-info-bottom .views {
            color: #546e7a;
            font-size: 12px;

        }

        .card-info .card-info-bottom .date {
            color: #546e7a;
            font-size: 12px;
        }

        .card-pic {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clip-icon {
            position: relative;

        }

        .clip-icon:hover {
            background-color: red;
        }

  </style>
  <div class="box">
<div class="card-video">
<div class="card-pic">
    <a href="">
        <img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
        <div class="clip-icon">
            <span class="fa fa-heart"></span>
        </div>
    </a>
</div>
<div class="card-info mt-1">
    <div class="card-info-logo">
        <img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
    </div>
    <div class="card-info-top">
        <div class="card-info-category">Video Category</div>
        <div class="card-info-title">Video Title</div>
    </div>
    <div class="card-info-bottom">
        <div class="views">312K</div>
        <div class="date">16 hour ago</div>
    </div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
    <a href="">
        <img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
        <div class="clip-icon">
            <span class="fa fa-heart"></span>
        </div>
    </a>
</div>
<div class="card-info mt-1">
    <div class="card-info-logo">
        <img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
    </div>
    <div class="card-info-top">
        <div class="card-info-category">Video Category</div>
        <div class="card-info-title">Video Title</div>
    </div>
    <div class="card-info-bottom">
        <div class="views">312K</div>
        <div class="date">16 hour ago</div>
    </div>
</div>
</div>
</box>

匿名用户

需要将flex-direction设置为row，使用flex-wrap:wrap as来正确设置格式。

如果父元素应用了position:relative，则可以将.clip-icon设置为position:absolute。

您可以将剪辑图标设置为显示:无，并通过添加使其在图片悬停时显示。Card-Pic:悬停。剪辑图标:{display:block；}

我在下面添加了一个片段

null

  .box{ 
    display:flex;
    flex-direction:row;
     flex-wrap:wrap;
  }
  .card-video {
            width: 305px;
            display: flex;
            flex-direction: column;
            margin:0.5rem;
        }

        .card-pic img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            max-width: 305px;
            max-height: 170px;
        }


        .card-info-logo {
            position: absolute;
            right: 5px;
            top: -28px;
        }

        .card-info-logo img {
            width: 55px;
            border-radius: 50%;
            border: 4px solid #5e4b55;
        }

        .card-info {
            position: relative;
            background-color: #292828;
            height: 90px;
            padding: 7px 10px 10px 10px;
            display: flex;
            flex-direction: column;
        }

        .card-info-top {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-info .card-info-category {
            color: #546e7a;
            font-size: 14px;
        }

        .card-info .card-info-title {
            color: #546e7a;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .card-info-bottom {
            border-top: solid 1px #44393e;
            padding-top: 7px;
            display: flex;
            align-items: center;
            line-height: 1;
            justify-content: space-between;
        }

        .card-info .card-info-bottom .views {
            color: #546e7a;
            font-size: 12px;

        }

        .card-info .card-info-bottom .date {
            color: #546e7a;
            font-size: 12px;
        }
        
        .card-pic:hover .clip-icon{
            display:block;
        }

        .card-pic {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
            position:relative;
        }

        .clip-icon {
            position: absolute;
            top:20px;
            right:20px;
            width:20px;
            height:20px;
            background-color:white;
            display:none;

        }

        .clip-icon:hover {
            background-color: red;
        }
  <div class="box">
<div class="card-video">
<div class="card-pic">
    <a href="">
        <img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
        <div class="clip-icon">
            <span class="fa fa-heart"></span>
        </div>
    </a>
</div>
<div class="card-info mt-1">
    <div class="card-info-logo">
        <img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
    </div>
    <div class="card-info-top">
        <div class="card-info-category">Video Category</div>
        <div class="card-info-title">Video Title</div>
    </div>
    <div class="card-info-bottom">
        <div class="views">312K</div>
        <div class="date">16 hour ago</div>
    </div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
    <a href="">
        <img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
        <div class="clip-icon">
            <span class="fa fa-heart"></span>
        </div>
    </a>
</div>
<div class="card-info mt-1">
    <div class="card-info-logo">
        <img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
    </div>
    <div class="card-info-top">
        <div class="card-info-category">Video Category</div>
        <div class="card-info-title">Video Title</div>
    </div>
    <div class="card-info-bottom">
        <div class="views">312K</div>
        <div class="date">16 hour ago</div>
    </div>
</div>
</div>
</box>

相关问题