小白遇到的CSS问题

通过swiper 仿百度音乐中的热门歌单，鼠标经过图片放大，并且有一个播放图标。

我通过hover 已经实现鼠标经过图片放大，但是无法实现同时图片放大，显示播放图标。我尝试播放图标也使用hover,但是播放图标虽然可以显示，鼠标经过图片放大就失效了。


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<!--swiper框架样式-->
<link rel="stylesheet" type="text/css" href="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/css/swiper-3.4.2.min.css" />

<!--主要样式-->
<style>
@charset "utf-8";

/*
 
 * 17素材vip建站专区模块代码
 * 详尽信息请看官网：http://www.17sucai.com/pins/vip
 *
 * Copyright , 温州易站网络科技有限公司版权所有
 * 图片不能商用，代码可商用。
 
 * 请尊重原创，未经允许请勿转载。
 * 在保留版权的前提下可应用于个人或商业用途
 
*/

*{padding: 0;margin: 0;font-family: "微软雅黑";box-sizing: inherit;outline: none;}
:after, :before{box-sizing: inherit;}
a{text-decoration: none;color: inherit;}
ul{list-style: none;}
.pc-bg-container{background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; padding-top: 20px;}
.home-market-section{text-align: center;}
/*标题*/


/*内容盒子*/
.home-market-section .section-inner{position: relative; max-width: 1200px; margin: 0 auto;}
.home-market-section .section-inner .swiper-container{height: 364px; max-width: 1200px;}
.home-market-section .section-inner .swiper-container .swiper-wrapper{align-items: center; height: 279px!important;}
/*内容列表*/
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide{height: 279px!important; background: 0 0;box-sizing: border-box; text-align: center;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a{display: block; float: left; position: relative; background-color: #fff;width: calc((100% - 80px)/ 5); height: 100%; margin-right: 20px;}

.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide .poster{width: 224px;height: 224px;overflow: hidden; position: absolute;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide img{width:224px;height: 224px; transition: all .5s ease-out;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide img:hover{transform: scale(1.1);}




.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide h3{font-weight: normal; font-size: 16px; margin-top: 18px; color: #252b3a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide p{font-size: 14px; color: #a0a2a8; margin-top: 6px; text-align: center; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.home-market-section .section-inner .swiper-container .swiper-wrapper .swiper-slide>a:last-of-type{margin-right: 0;}
/*分页*/
.home-market-section .section-inner .swiper-container .swiper-pagination-bullets{bottom: 20px;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet{position: relative; margin: 0 5px; width: 24px; height: 4px; border-radius: 100px; opacity: 1; background: 0 0;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet:before{content: ''; display: inline-block; position: absolute; width: 24px!important; height: 4px; opacity: 1; left: 0; border-radius: 100px; background: #e2e3e4; vertical-align: middle; transition: opacity .8s,background-color .8s;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active{opacity: 1;}
.home-market-section .section-inner .swiper-container .swiper-pagination-bullet-active:before{width: 24px!important; opacity: 1; border-radius: 100px; transform: scale(1.2);background: linear-gradient(39deg, #b08cf9,#9a9ef5, #91a5f4);}
/*左右箭头*/
.home-market-section .section-inner .swiper-button-prev{left: -50px; top: 118px; margin-top: 0; background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}
.home-market-section .section-inner .swiper-button-next{right: -50px; top: 118px; margin-top: 0; background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg); transform: rotate(180deg);}
.home-market-section .section-inner .swiper-button-next:hover{background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}
.home-market-section .section-inner .swiper-button-prev:hover{background: url(https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/images/marketplace-home-arrow_big.svg);}


</style>

<!--jquery框架-->
<script src="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

	<div class="pc-bg-container">
		<div class="home-market-section">
			<div class="section-inner">
				<div class="swiper-container swiper-container-horizontal">
					<div class="swiper-wrapper">
						<!--下文中的data-swiper-parallax属性是swiper的视差效果，如果觉得污染代码，可以删除-->
						<div class="swiper-slide">
							<a href="123.html" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="images/1.jpg">
								</div>
								<div class="playico"></div>
									<h3>抖音热歌盘点</h3>
									<p>2021/6/1</p>							
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20200611/20200611053851105092.jpg"></div>
									<h3>Hot！最全Hi-Res抖音热歌</h3>
									<p>2021/6/1</p>									
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20201025/20201025150514203939.jpg"></div>
									<h3>KTV必点热歌：90后麦霸都爱唱这些</h3>
									<p>2021/6/1</p>										
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://p3fx.kgimg.com/soft/collection/150/20201224/20201224111023504746.jpg"></div>
									<h3>2021中文DJ热曲推荐【更新中】</h3>
									<p>2021/6/1</p>		
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20201027/20201027221648889189.jpg"></div>
									<h3>劲爆DJ热歌：强劲节奏 动感狂嗨</h3>
									<p>2021/6/1</p>		
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="123.html" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://p3fx.kgimg.com/soft/collection/150/20210416/20210416170204745561.jpg"></div>
									<h3>华语热歌：流行节奏，一键GET</h3>
									<p>2021/6/1</p>											
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20201108/20201108161447499862.jpg"></div>
									<h3>经典粤语300首：回忆不朽经典</h3>
									<p>2021/6/1</p>											
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20200706/20200706101457579499.jpg"></div>
									<h3>红歌DJ版：火速围观跟随潮流</h3>
									<p>2021/6/1</p>											
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://p3fx.kgimg.com/soft/collection/150/20201119/20201119180213968878.jpg"></div>
									<h3>车载中文DJ：一路前行为了TA</h3>
									<p>2021/6/1</p>											
								</div>
							</a>
							<a href="123.html" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
								<div class="inner-content">
									<div class="poster">
									<img src="https://imgessl.kugou.com/custom/150/20201217/20201217152229300351.jpg"></div>
									<h3>我对你又何止是执迷不悟</h3>
									<p>2021/6/1</p>											
								</div>
							</a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>

		</div>

	</div>


<script src="https://www.17sucai.com/preview/1528155/2019-04-01/p/statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(function() {

	new Swiper(".pc-bg-container .home-market-section .swiper-container", {
		loop: !0,
		speed: 500,
		
		slidesOffsetBefore: 0,
		parallax: !0,
		pagination: {
			el: ".pc-bg-container .swiper-pagination",
			clickable: true
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev"
		}
	})

});
</script>

</body>

</html>

请大神给一个指导思路。ps:学生党，充值至少100，无奈，留微信二维码打赏。

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
qq_45286427 2021-06-11 22:28
关注
图片放大使用这个transform: scale(1.2);
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决 1
无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

小白遇到的CSS问题 css html5
2021-06-11 20:43

回答 2 已采纳图片放大使用这个transform: scale(1.2);
css前端设计文本居中问题 css html 前端
2022-04-08 14:21

回答 4 已采纳在span标签外添加center标签
css前端设计文本垂直居中问题 css html 前端
2022-04-08 14:45

回答 2 已采纳很多办法，最简单是用footer的padding，设置上下一样的padding，他就居中了。行高也可以，但是要多包一层，外层设置为footer高度一样的行高，内存设置为每行固定的一个高度。还有flex
前端小白学习记录-css
2022-11-12 15:29

再会过去的博客小白初学，记录日常学习
css + js动画遇到的问题 css javascript 前端
2023-01-23 19:28

回答 2 已采纳设置了margin-left:10px，offsetLeft 这里的话是相对于body左边缘距离，其实就是left+margin-left。i = 0，div.offsetLeft = 10，div.
居中显示 CSS样式前端样式 css 前端
2022-03-14 10:49

回答 1 已采纳 padding 要么不设要不左右两边都设你现在是span属性是行内标签设置不了宽高改成inline-block行内块，不需要设置padding 宽高都给个20px border-radi
HTML引入css中遇到的问题 css html
2022-05-29 13:34

回答 2 已采纳 ../css/index.css或者你把index.html从js文件夹拿出来，放在跟css文件夹同级目录，./css/index.css用这个就没问题了
web前端加众多css、jQuery还有js的作业静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计
2023-12-31 07:49

遇到网页设计问题的童鞋也可以提问，这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...
关于前端css的设置问题 css html
2023-01-05 10:19

回答 2 已采纳你如果只用css实现的话，划过的时候给个背景图不就行了
前端初学者遇到这种问题 css html5 javascript
2022-03-28 22:52

回答 1 已采纳引入CSS <link href="文件地址" rel="stylesheet" type="text/css" /> href 值为外部资源地址，这里是css的地址rel 定义当前文
前端css如何写才能实现 css html 前端
2022-02-10 14:17

回答 3 已采纳 <!DOCTYPE html> <html> <head> <title></title> <style>
前端小白如何学习 CSS
2019-05-31 21:59

前端头条的博客很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机...
css子代选择器问题 css html 前端
2022-09-20 18:39

回答 2 已采纳你审查元素会发现 p 被解析成两个 p了。因为不建议使用p元素包裹div <!DOCTYPE html> <html lang="en"> <head
前端小白的html+css的分享
2019-09-27 13:21

春泽青瑜的博客前端小白的html+css的分享Html+Css做页面遇到的小问题和解决方法首先进行页面布局定位margin无效问题怎么让做静态页面更高效如果缺乏图标元素自适应浏览器窗口避免窗口伸缩出现图片未占满盒子宽高问题解决浏览器窗口...
【前端大屏】开发大屏遇到的问题记录
2022-01-12 17:44

小白Rachel的博客简单先记录一下最近刚接触大屏遇到的许许多多的问题，后面会一一展开记录。 1.大屏的自适应问题：使用transform:scale(x,y) 2.中国地图hover时tooltip无法应用效果：不能把样式写在<style scope lang="scss"&gt...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 10月16日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 10月8日

悬赏问题

¥15 WPF 大屏看板表格背景图片设置
¥15 这个主板怎么能扩出一两个sata口
¥15 不是，这到底错哪儿了😭
¥15 2020长安杯与连接网探
¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
¥15 banner广告展示设置多少时间不怎么会消耗用户价值
¥16 mybatis的代理对象无法通过@Autowired装填
¥15 可见光定位matlab仿真
¥15 arduino 四自由度机械臂
¥15 wordpress 产品图片 GIF 没法显示

小白遇到的CSS问题

2条回答 默认 最新

问题事件

悬赏问题

2条回答默认最新