Question

我是CSS的新手，现在有一个困扰我一段时间的问题。我在img标签的当前跨度上设置了“溢出：隐藏”以获得缩放效果，但是当我将鼠标移到图像上时，图像将向下流动到底部，仅隐藏其他3面。我的代码卡在这里，有人可以帮我吗？非常感谢。这是我的代码：

<style>
.newl {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
}
.newb {
    display: list-item;
    max-width: 23%;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
    float: left;
    overflow: hidden;
}
.newb a {
    padding: 0 0 25px;
}
.newj img {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;
}
.newj img:hover {
    transform: scale(1.2);
}

.newt {
    display: block;
    text-align: left;
    color: black;
    padding-top: 3px;
    padding-left: 2px;
}
.newp {
    display: block;
    text-align: right;
    color: black;
    font-weight: bold;
    padding-top: 3px;
    padding-right: 2px;
}
</style>
</head>

<body>
<section class="newitem">
    <ul class="newl">
        <li class="newb">
            <a href="#">
                <span class="newj"><img src="img/new1.jpg" alt="#">
                </span>
                <span class="newt">TEST</span>
                <span class="newp">testing</span>
            </a>
        </li>
    </ul>
</section>
</body>

Answer 1

您需要添加位置：相对和溢出：隐藏，以包装图像包装元素（您的情况是.newj）。将其添加到您的CSS代码中：

.newj {
    position: relative;
    display:block;
    overflow: hidden;
  }

为什么我的“溢出：隐藏”无法正常工作？

1 个答案: