css-鼠标移入出现遮罩层样式

最新推荐文章于 2024-08-12 16:19:20 发布

西瓜有点饿

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量616

点赞数 10

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xxuxioxx/article/details/135670476

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景：

遍历接口数据，循环展示每个场景，生成场景卡片。当鼠标移入时，特定场景的卡片出现遮罩层，遮罩层上有按钮。

正常样式：

鼠标移入样式：

html结构：

<div v-for="(item,index) in accountListData" 
    :key="index" 
    v-show="item.isShowScene" //动态控制是否展示卡片
    @mouseenter="handleMouse(true,item.channel)"                     
    @mouseleave="handleMouse(false,item.channel)"
    class="market-unit flex-shrink0">
    // 'search'卡片需要鼠标效果
    <div class="unit-hover" v-show="item.channel==='search'&&showMask">
        <el-button @click="handleSearchCreate" 
            type="primary" style="width:40%">新建计划</el-button>
        <el-button @click="handleSearchLook" 
            type="primary" plain style="width:40%">查看计划</el-button>
    </div>
    // 'display'卡片需要鼠标效果
    <div class="unit-hover" v-show="item.channel==='display'&&showMask1">
        <el-button @click="handleDisplayLook" 
            type="primary" plain style="width:160px">查看计划</el-button>
    </div>
    //头部
    <div class="unit-title flex flex-align-center flex-between">
        <div class="flex flex-align-center">
            <p class="name">{{ item.channelName }}</p>
            <p class="f12 color999 ml-8">{{ item.itemDesc }}</p>
        </div>
        <router-link v-show="item.channel==='brandzone'" class="router-link color-theme"
            :to="`/manage/brands`" target="_blank">花费配置</router-link>
    </div>
    //数据部分
    <div class="target-data flex">
        <span v-for="pick in pickListStatic" :key="pick.key">
            <div>
                <p>{{ pick.value }}</p>
                <p class="bold" style="color: #333">{{ item.data[pick.key] }}</p>
            </div>
        </span>
    </div>
</div>

//鼠标移入哪个卡片才展示对应鼠标效果
handleMouse(type,channel) {
    if(channel==='search') {
        this.showMask = type
    }
    if(channel==='display') {
        this.showMask1 = type
    }
},

css代码：

.market-unit {
      font-size: 14px;
      color: #666;
      width: 32%;
      min-width: 320px;
      min-height: 200px;
      background: linear-gradient(135deg, transparent, #e6fafb); //线性渐变
      padding: 20px 12px;
      position: relative;
      overflow: hidden;
      margin-right: 1.3%;
      box-shadow: 0 -2px 14px 4px #eee;
      border-radius: 10px;
      &.flex-shrink0 {
        margin-bottom: 20px;
      }
      &:hover { //对所有，鼠标经过，主题色
        background: #e8f8f9;
      }
      .unit-hover { //特殊的鼠标效果
        position: absolute;
        // background: rgba(255,255,255, .8); //透明遮罩效果
        background: #e8f8f9; //主题色
        border: 1px solid #f4f4f4;
        padding: 12px;
        padding-left: 20px;
        top: 140px;
        left: 0;
        right: 0;
        height: 100%;
        color: #17b8be;
        line-height: 26px;
        transition: top ease .2s;
        .unit-title:after {
          top: 50px;
        }
      }
      .unit-title {
        padding-left: 10px;
        .name {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
        &:after {
          content: '';
          width: 98%;
          border-top: 1px solid #ddd;
          position: absolute;
          left: 1%;
          top: 62px;
        }
      }
      .target-data {
        flex-wrap: wrap;
        padding-left: 10px;
        margin-top: 18px;
        span {
          display: block;
          margin: 16px 0 0;
          width: 33%;
        }
        p {
          line-height: 26px;
          min-width: 90px;
          font-size: 12px;
          &.bold {
            font-size: 14px;
          }
        }
      }
    }