CSS实现鼠标悬停在p上出现抬起元素的效果

如图所示,左侧为正常样式,右侧为添加效果后的样式

CSS实现鼠标悬停在div上出现抬起元素的效果(示例代码) 第1张

只需要给p添加以下class样式,主要实现效果在&:hover里面

.component-item {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 5px;
  margin-left: 15px;
  &:hover {
    cursor: move;
    box-shadow: 0 4px 16px rgb(0, 0, 0);
  }
}

CSS3:鼠标悬停效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello H5</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				height: 100vh;
				background: #d6e5e7;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.nav {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
			}
			.item {
				width: 70px;
				height: 70px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				cursor: pointer;
				position: relative;
				z-index: 1;
			}
			img {
				transform: scale(1);
				transition: .5s;
			}
			span {
				position: absolute;
				bottom: 5px;
				font-size: 12px;
				color: #fff;
				opacity: 0;
				transition: .5s;
			}
			.active img {
				transform: scale(.8);
			}
			.active span {
				opacity: 1;
			}
			.bg {
				width: 70px;
				height: 70px;
				border-radius: 10px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				transition: .5s;
			}
			.active:nth-child(1)~.bg {
				transform: translateX(calc(70px*0));
				background: #f53b57;
				box-shadow: 0 10px 15px #f53b57;
			}
			.active:nth-child(2)~.bg {
				transform: translateX(calc(70px*1));
				background: #5d62fb;
				box-shadow: 0 10px 15px #5d62fb;
			}
			.active:nth-child(3)~.bg {
				transform: translateX(calc(70px*2));
				background: #05c46b;
				box-shadow: 0 10px 15px #05c46b;
			}
			.active:nth-child(4)~.bg {
				transform: translateX(calc(70px*3));
				background: #0fbcf9;
				box-shadow: 0 10px 15px #0fbcf9;
			}
			.active:nth-child(5)~.bg {
				transform: translateX(calc(70px*4));
				background: #ffa801;
				box-shadow: 0 10px 15px #ffa801;
			}
		</style>
	</head>
	<body>
		<p class="76b7-51fe-7398-62ea nav">
			<p class="51fe-7398-62ea-ccd0 item active">
				<img src="home.png">
				<span>home</span>
			</p>
			<p class="7398-62ea-ccd0-39ce item">
				<img src="goods.png">
				<span>goods</span>
			</p>
			<p class="62ea-ccd0-39ce-efd2 item">
				<img src="cart.png">
				<span>cart</span>
			</p>
			<p class="ccd0-39ce-efd2-2801 item">
				<img src="mine.png">
				<span>mine</span>
			</p>
			<p class="39ce-efd2-2801-cc0d item">
				<img src="setup.png">
				<span>setup</span>
			</p>
			<p class="60a3-edcc-f91c-f113 bg"></p>
		</p>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('.nav').on('click', '.item', function(event) {
			var index = $(this).index(); //获取到点击的.nav下,item的索引
			$(".nav .item").eq(index).addClass("active").siblings().removeClass("active"); //点击项高亮显示
		});
	</script>
</html>

CSS实现鼠标悬停在div上出现抬起元素的效果(示例代码) 第2张

到此这篇关于CSS实现鼠标悬停在p上出现抬起元素的效果的文章就介绍到这了,更多相关css鼠标悬停抬起元素内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章,希望大家以后多多支持酷瑞百科!

收藏(0)