被风吹过的屁
2021-06-11 20:43
采纳率: 100%
浏览 25
已结题

小白遇到的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,无奈,留微信二维码打赏。

 

 

 

  • 好问题 提建议
  • 收藏

2条回答 默认 最新

  • qq_45286427 2021-06-11 22:28
    已采纳
     图片放大使用这个transform: scale(1.2); 
    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 怒锤狗男人 2021-06-12 01:44

    将图片和播放按钮放在同一个盒子里,让图片和播放按钮是同级关系,再通过hover这个盒子来分别控制图片放大和播放按钮显示

    评论
    解决 1 无用
    打赏 举报

相关推荐 更多相似问题