CSS实现鼠标悬停在div上出现抬起元素的效果(示例代码）
发布时间：2024-06-25 15:58:16 作者：青莳吖 
我要评论
我要评论这篇文章主要介绍了CSS实现鼠标悬停在div上出现抬起元素的效果，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
CSS实现鼠标悬停在div上出现抬起元素的效果
如图所示，左侧为正常样式，右侧为添加效果后的样式
只需要给div添加以下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>
<div class="nav">
<div class="item active">
<img src="home.png">
<span>home</span>
</div>
<div class="item">
<img src="goods.png">
<span>goods</span>
</div>
<div class="item">
<img src="cart.png">
<span>cart</span>
</div>
<div class="item">
<img src="mine.png">
<span>mine</span>
</div>
<div class="item">
<img src="setup.png">
<span>setup</span>
</div>
<div class="bg"></div>
</div>
</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上出现抬起元素的效果的文章就介绍到这了,更多相关css鼠标悬停抬起元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了CSS实现鼠标悬停图片放大的几种方法,使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放2024-05-29
这篇文章主要介绍了CSS实现鼠标悬停svg图标描边效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-30
当我们想在图片上面放置一些文字内容时，发现不管怎么放置，要么就是图片影响到文字的观感，要么就是文字挡住图片的细节，那么怎么可以既看到图片的细节又可以看到对图片的2023-03-01
这篇文章主要介绍了CSS 实现 图片鼠标悬停折叠效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-21- 这篇文章主要介绍了CSS实现鼠标悬停改变其他标签样式的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-19
- 这里来给大家推荐一个纯CSS实现鼠标悬停显示图片效果的实例分享,以针对鼠标移到tr标签上来添加hover这种最简单的方式来演示,简单明了,需要的朋友可以参考下2016-06-06
- 这篇文章主要为大家介绍了css实现鼠标悬停时滑出层提示的方法,可实现鼠标悬浮于文字上弹出提示层的效果,非常具有实用价值,需要的朋友可以参考下2015-05-11
- 类似热点链接的一段小代码：利用定位实现，看过定位这个概念的，都能理解。实现的效果就是当鼠标悬停到MM字样时，图片中就会出现一个白色的框，喜欢的朋友可以了解下2013-11-05
- 制作表单的时候，实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原2009-07-11
英文教程：鼠标悬停（hover）效果-CSS教程-网页制作-网页教学网
前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果，今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。 这是一个很棒的鼠标悬停（hover）效果。从国外2008-10-17
最新评论