Html 为什么我的'；溢出：隐藏'；工作不正常？_Html_Css_Overflow

Html 为什么我的'；溢出：隐藏'；工作不正常？

html css

Html 为什么我的'；溢出：隐藏'；工作不正常？,html,css,overflow,Html,Css,Overflow,我是CSS新手，现在有一个问题困扰着我。我在img标记的平行范围上设置了“溢出：隐藏”以获得缩放效果，但当我在图像上移动鼠标时，图像将向下流动，它仅隐藏其他3个面。我的代码卡在这里了，有人能帮我吗？非常感谢你。这是我的密码： <style> .newl { padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: st

我是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>


纽尔先生{
填充：0；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：拉伸；
框大小：边框框；
}
纽布先生{
显示：列表项；
最大宽度：23%；
利润率：0.20px0；
填充：0；
列表样式：无；
浮动：左；
溢出：隐藏；
}
.新来的{
填充：0 25px；
}
.newj img{
显示：块；
宽度：100%；
光标：指针；
过渡：均为0.3秒；
}
.newj img:悬停{
转换：比例（1.2）；
}
纽特先生{
显示：块；
文本对齐：左对齐；
颜色：黑色；
垫面：3件；
左侧填充：2px；
}
纽普先生{
显示：块；
文本对齐：右对齐；
颜色：黑色；
字体大小：粗体；
垫面：3件；
右侧填充：2px；
}

您需要将position:relative和overflow:hidden添加到image wrap元素（在您的例子中是.newj）。将其添加到css代码中：

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

position:relative

不是必需的。它需要IE10非常感谢！那么

li

元素（newb）中的

overflow:hidden

就没有必要了？这似乎对守则没有任何影响。再次感谢！您已经在列表项

.newb

类上设置了

溢出：隐藏。您还没有在实际的图像包装器.newj
上设置任何溢出：隐藏。因此，当图像缩放到悬停状态时，它将覆盖列表项中的其他元素。@Emech非常感谢！看来我还有很多关于CSS的知识要学，非常感谢你的回答！