老师好，有个小问题
来源：5-1 实现栅格系统--基础部分
悄然于心
2019-05-14 17:41:18
当鼠标移入图片的时候父元素宽度变大了。。我也设置overflow属性了，怎么不管用呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
<title>栅格系统</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-3">
<a href="./index.html" class="header-logo">
<img src="img/logo.svg" alt="">
</a>
</div>
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-md-9 d-none d-md-block">
<ul 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>
</ul>
</div>
</div>
</div>
</div>
<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="container">
<div class="row">
<div class="slider-text-container col-md-5 col-md-push-7">
<h3 class="slider-title">Galaxy S9 | S9+</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">
</div>
</div>
</div>
</div>
<div class="pics-container">
<div class="container">
<div class="row">
<a href="###" class="pics-item d-block col-md-4"><img src="img/2-1.jpg"></a>
<a href="###" class="pics-item d-block col-md-4"><img src="img/2-2.jpg"></a>
<a href="###" class="pics-item d-block col-md-4"><img src="img/2-3.jpg"></a>
</div>
</div>
</div>
<div class="upper-container d-md-none">
<a href="#">回到顶部 ^</a>
</div>
<div class="caption-container">
<div class="container">
<p class="caption-item">*1</p>
<p class="caption-item">*2</p>
<p class="caption-item">*3</p>
<p class="caption-item">*4</p>
</div>
</div>
<div class="toUp-container d-none d-md-block">
<div class="container">
<a href="#" class="toUp">回到顶部 ^</a>
</div>
</div>
<div class="site-links">
<div class="container">
<div class="row">
<div class="site-links-container col-6 col-md-3">
<a href="###" class="site-links-title">网站地图</a>
<a href="###" class="site-links-item">关于三星</a>
<a href="###" class="site-links-item">投资省关系</a>
<a href="###" class="site-links-item">新闻中心</a>
<a href="###" class="site-links-item">人才招聘</a>
<a href="###" class="site-links-item">三星开发者网站</a>
</div>
<div class="site-links-container col-6 col-md-3">
<a href="###" class="site-links-title">三星商店</a>
<a href="###" class="site-links-item">网上商城</a>
<a href="###" class="site-links-item">最新活动</a>
<a href="###" class="site-links-item">授权体验店</a>
<a href="###" class="site-links-item">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
</div>
<div class="site-links-container col-6 col-md-3">
<a href="###" class="site-links-title">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
<a href="###" class="site-links-item">啦啦啦</a>
</div>
<div class="site-links-container col-6 col-md-3">
<a href="###" class="site-links-title">官方分享</a>
<div class="icons">
<i>图1</i><i>图2</i>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<div class="container">
<div class="row">
<div class="state-container col-md-10">
<a href="###" class="state-item">啦啦啦</a>
<a href="###" class="state-item">啦啦啦</a>
<a href="###" class="state-item">啦啦啦</a>
</div>
<a href="###" class="language col-md-2">啦啦啦</a>
</div>
<div class="row">
<p class="details">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
</div>
</div>
</footer>
<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>/* 布局 start */
/* header */
.header-container{
background-color: #fff;
border-bottom:1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container{
height:64px;
}
.header-btn-container{
display: flex;
align-items: center;
justify-content:flex-end;
}
/* nav */
.nav-container{
height:0;
border-bottom:1px solid #dadada;
transition:height .5s;
overflow: hidden;
position: relative;
top:-1px;
}
.nav-container-extended{
height:201px;
top:0;
}
/* slider */
.slider-container{
margin:20px 0;
}
.slider-container .row{
margin-left:0;
margin-right:0;
background-color:#f5f5f5;
}
.slider-text-container{
padding:20px 0;
}
@media(min-width:768px){
.slider-container .row{
display: flex;
align-items: center;
}
}
/* pics */
.pics-container{
margin-bottom:20px;
}
/* caption */
.caption-container{
padding:20px 0;
background-color:#f5f5f5;
font-size:14px;
}
/* upper */
.upper-container{
padding:20px 0;
font-size:16px;
text-align:center;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
}
/* toUp */
.toUp-container{
text-align:right;
padding:10px 0;
background-color: #f5f5f5;
}
/* site-links */
.site-links{
padding-top:10px;
background-color: #f5f5f5;
}
.site-links-container{
margin-bottom:20px;
}
/* footer */
.footer-container{
padding:20px 0 0 2px;
background-color:#333;
}
/* 布局 end */
/* 组件 start */
/* btn-toggle */
.btn-toggle{
padding:10px;
background-color:transparent;
border:none;
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;
}
/* slider-btns */
.btn-rounded{
display: inline-block;
padding:10px 30px;
background-color:transparent;
border:1px solid #000;
border-radius:20.5px/20.5px;
margin-left:10px;
cursor:pointer;
transition:all .3s;
}
.btn-rounded:hover{
background-color:#000;
color:#fff;
}
/* 组件 start */
/* 内容 start */
/* header */
.header-logo{
width:136px;
height:100%;
display:flex;
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:0;
}
.header-nav-link{
display:flex;
align-items:center;
font-weight:bold;
}
/* nav */
.nav-link{
display: block;
height:40px;
line-height: 40px;
font-weight:bold;
}
/* slider */
.slider-title{
font-size:30px;
}
.slider-subtitle{
font-size:20px;
font-weight:normal;
}
.slider-btns .btn-rounded{
font-size:16px;
font-weight:bold;
margin:0 10px 10px 0;
}
.slider-btns .btn-rounded:last-child{
margin-right:0;
}
.slider-title,
.slider-subtitle,
.slider-btns{
text-align:center;
margin-bottom:20px;
}
/* pics */
.pics-item{
overflow: hidden;
}
.pics-item>img{
transition:transform .3s;
}
.pics-item:hover>img{
transform:scale(1.2);
}
/* caption */
.caption-item{
line-height:20px;
}
/* toUp */
.toUp{
font-size:14px;
color:#000;
}
/* site-links */
.site-links-title{
font-size:16px;
font-weight: bold;
}
.site-links-item{
font-size:14px;
}
.site-links-title,
.site-links-item{
display: block;
margin-bottom:10px;
}
.site-links-item:last-child{
margin-bottom:0;
}
/* footer */
.state-item{
color:#fff;
margin-right:20px;
}
.state-item:last-child{
margin-right:0;
}
.state-item:hover{
color:#fff;
}
.language{
color:#fff;
}
.state-container,
.language{
margin-bottom:10px;
}
.details{
color:#999;
text-indent:1em;
}
/* 内容 start */写回答
1回答
-
你好，是因为栅格布局有默认的左右paddind值实现的间距：
而图片放大的时候会占据padding部分的，所以超出对栅格容器设置超出隐藏没有用，需要在嵌套一个盒子，如下：
可以重新测试下，祝学习愉快！
0
相似问题