我设置的hover 动画图片为什么会整张放大，不像老师的效果
来源：4-6 商品展示、返回顶部、帮助、底部footer区
weibo_我是LUFFCIER_0
2020-11-15 09:46:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index-1.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/base-1.css">
<style type="text/css"></style>
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-3">
<a href="./index-1.html" class="header-logo">
<img src="img/logo.svg" alt="cellphone">
</a>
</div>
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<div class="btn-toggle-bar"></div>
<div class="btn-toggle-bar"></div>
<div class="btn-toggle-bar"></div>
</button>
</div>
<div class="header-nav-container col-md-9 d-none d-md-block">
<ui class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">手机&平板</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">电视&平板</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">手机&平板</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">手机&平板</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">手机&平板</a></li>
</ui>
</div>
</div>
</div>
</header>
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">手机&平板</a></li>
</ul>
</nav>
<div class="slider-container">
<div class="contaienr">
<div class="row">
<div class="slider-text-container col-md-5 col-md-push-7">
<h3 class="slider-title">Galaxy 9</h3>
<h4 class="slider-subtitle">冰蓝 换新省事</h4>
<div class="slider-btns">
<a href="###" class="btn-rounded">了解更多</a>
<a href="###" class="btn-rounded">立即购买</a>
</div>
</div>
<div class="col-md-7 col-md-pull-5">
<img src="img/1.png" alt="cellphone">
</div>
</div>
</div>
</div>
<div class="banner-container">
<div class="container">
<div class="row">
<div class="banner col-12 col-md-4">
<img src="img/2-1.jpg" alt="pic1">
</div>
<div class="banner col-12 col-md-4">
<img src="img/2-2.jpg" alt="pic2">
</div>
<div class="banner col-12 col-md-4">
<img src="img/2-3.jpg" alt="pic3">
</div>
</div>
</div>
</div>
<script>
var nav=document.getElementById('nav');
var navExtendedClassName='nav-container-extended';
document.getElementById('btn-toggle').onclick=function(){
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName);
}
else{
nav.classList.add(navExtendedClassName);
}
};
</script>
</body>
</html>
.header-container{
background: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,.header-nav-container,.header-btn-container{
height: 64px;
}
.header-btn-container{
float: right;
}
.btn-toggle{
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover{
background-color:#f9f9f9;
}
.btn-toggle-bar{
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}
.btn-toggle-bar+.btn-toggle-bar{
margin-top: 4px;
}
.btn-toggle:hover .btn-toggle-bar{
background-color: #1428a0;
}
.header-logo{
display: flex;
width: 136px;
height: 100%;
align-items: center;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height: 100%;
}
.header-nav{
display: flex;
justify-content: flex-end;
font-size: 14px;
}
.header-nav-item{
margin-left: 24px;
}
.header-nav-item:first-child{
margin-left:0px;
}
.header-nav-link{
display: flex;
align-items: center;
font-weight: bold;
}
.nav-container{
height: 0;
overflow: hidden;
border-bottom: 1px solid #dadada;
transition: height 0.5s;
}
.nav-container-extended{
height: 201px;
}
.nav-link{
display: block;
height: 40px;
line-height: 40px;
font-weight: bold;
}
.slider-container{
margin-top: 20px;
margin-bottom: 20px;
}
.slider-container .row{
background-color: #f5f5f5;
margin-left: 0;
margin-right: 0;
}
.slider-text-container{
padding: 20px 0;
}
.slider-subtitle,
.slider-title,
.slider-btns{
margin-bottom: 20px;
text-align: center;
}
.btn-rounded{
display: inline-block;
padding: 10px 30px;
background-color: transparent;
border:1px solid #000;
border-radius: 30px;
color: #000;
font-size: 16px;
font-weight: bold;
transition: all 0.3s;
}
.btn-rounded:hover{
background-color:#000;
color: #fff;
}
.btn-rounded{
margin-right: 20px;
margin-bottom: 20px;
}
@media (min-width: 798px){
.slider-container .row{
display: flex;
align-items: center;
}
}
.banner img{
transition: transform 1s;
cursor: pointer;
}
.banner:hover img{
transform:scale(1.2);
}
2回答
-
同学你好，设置display:block;是为了将其转成块级元素，这样a就会有固定的宽度和高度，只有父元素有固定的宽高，overflow:hidden;才会有效果。这个过程可以简单理解成，盒子要先知道自己多宽、多高，它才能根据自己的宽高判断里面的内容是否有超出。
老师在你的代码里，给img加上a标签，不设置display:block;是无法实现超出隐藏效果的，如下：
同学可以试一下。
祝学习愉快！
0 -
好帮手慕久久
2020-11-15
同学你好，老师的方案中，有如下结构和样式：
由于同学缺少该部分内容，所以效果不好看。建议同学添加上该结构和样式试试。
祝学习愉快！
0h020-11-15
相似问题
回答 2