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鼠标悬停抬起元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：抬起元素鼠标悬停 css

CSS实现鼠标悬停图片放大的多种方法

这篇文章主要介绍了CSS实现鼠标悬停图片放大的几种方法,使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放

2024-05-29
CSS实现鼠标悬停svg图标描边效果

这篇文章主要介绍了CSS实现鼠标悬停svg图标描边效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

2023-03-30
纯CSS实现鼠标悬停图片上升显示描述案例

当我们想在图片上面放置一些文字内容时，发现不管怎么放置，要么就是图片影响到文字的观感，要么就是文字挡住图片的细节，那么怎么可以既看到图片的细节又可以看到对图片的

2023-03-01
CSS 实现图片鼠标悬停折叠效果

这篇文章主要介绍了CSS 实现图片鼠标悬停折叠效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

2020-09-21