鼠标移入展示字体操作

news2024/11/18 18:35:04

鼠标移入展示字体
在这里插入图片描述

点击删除实行删除操作,点击图片文字跳转产品详情的逻辑实现

        <div class="allProduct-content">
          <template v-for="(item, index) in obj.product" :key="index">
            <!-- <img :src="item.image" /> -->
            <div class="item" @click="cancelCollect">
              <div class="image" style="background-color: #eee">图片</div>
              <span @click="deleteTracet(item)">取消收藏</span>
              <div class="productName">{{ item.productName }}</div>
              <div class="company">{{ item.company }}</div>
            </div>
          </template>
        </div>
            .allProduct-content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 24px;

      .item {
        position: relative;
        height: 327px;
        width: calc(20% - 13px);
        margin-right: 16px;
        border: 1px solid rgba(232, 232, 232, 1);
        box-sizing: border-box;
        padding: 14px;
        margin-bottom: 14px;
        &:nth-child(5n) {
          margin-right: 0px !important;
        }
      }
      .item a,
      .item span {
        display: none;
        text-decoration: none;
      }
      .item:hover {
        cursor: pointer;
      }
      .item:hover a.now {
        cursor: pointer;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 100;
        left: 0;
        display: block;
      }
      .item:hover span {
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        color: rgba(255, 255, 255, 1);
        width: 100%;
        z-index: 10;
        height: 40px;
        line-height: 40px;
        background: rgba(212, 48, 48, 0.8);
        filter: alpha(opacity=60);
        // -moz-opacity: 0.5;
        // opacity: 0.5;
        font-size: 14px;
        text-align: center;
      }
      .image {
        width: 100%;
        height: 200px;
      }
      .productName {
        font-size: 14px;
        font-weight: 700;
        line-height: 20.27px;
        color: rgba(26, 26, 26, 1);
        padding: 16px 0;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
      }
      .company {
        font-size: 12px;
        font-weight: 400;
        line-height: 17.38px;
        color: rgba(102, 102, 102, 1);
        padding-top: 8px;
      }
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1032409.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云原生Kubernetes:Pod控制器

目录 一、理论 1.Pod控制器 2.Deployment 控制器 3.SatefulSet 控制器 4.DaemonSet 控制器 5.Job 控制器 6.CronJob 控制器 二、实验 1.Deployment 控制器 2.SatefulSet 控制器 3.DaemonSet 控制器 4.Job 控制器 5.CronJob 控制器 三、问题 1. showmount -e 报错…

macOS 下 Termius 中文显示为乱码

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

云原生微服务 第五章 Spring Cloud Netflix Eureka集成负载均衡组件Ribbon

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第四章 Spring Cloud Netflix 之 Ribbon 文章目录 系列文章目录[TOC](文章目录) 前言1、负载均衡1.1、服务端负载均衡1.2、…

pcl--第十一节 点云外接立方体和点云模板匹配

点云外接立方体&#xff08;3D物体包容盒&#xff09; 使用pcl::MomentOfInertiaEstimation类来获取基于偏心率和惯性矩的描述符。该类还允许提取云的轴对齐和定向的边界框。但是提取的OBB并非最小可能的边界框。 原理简述 包围体&#xff08;包容盒&#xff09;是一个简单的…

编写第一个Go程序

编写第一个Go程序 1. 开发环境构建 在Go语言中&#xff0c;开发环境的构建需要设置GOPATH环境变量。在1.8版本之前&#xff0c;必须显式设置GOPATH环境变量。而在1.8版本及之后&#xff0c;如果没有设置GOPATH&#xff0c;Go将使用默认值。 在Unix系统上&#xff0c;默认值为…

【AI视野·今日NLP 自然语言处理论文速览 第三十七期】Thu, 21 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 21 Sep 2023 Totally 57 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Chain-of-Verification Reduces Hallucination in Large Language Models Authors Shehzaad Dhuliawala, Mojt…

Linux学习记录——이십구 网络基础(2)

文章目录 1、理解网络间通信2、理解协议3、网络字节序4、socket编程接口和sockaddr结构 1、理解网络间通信 宏观上&#xff0c;是主机与主机在发送接收消息&#xff0c;但主机怎么去发送消息&#xff1f;主机间的通信是通过进程完成的&#xff0c;这个进程就是用户发起的进程&…

《深度学习工业缺陷检测》专栏介绍 CSDN独家改进实战

&#x1f4a1;&#x1f4a1;&#x1f4a1;深度学习工业缺陷检测 1&#xff09;提供工业小缺陷检测性能提升方案&#xff0c;满足部署条件&#xff1b; 2&#xff09;针对缺陷样品少等难点&#xff0c;引入无监督检测&#xff1b; 3&#xff09;深度学习 C、C#部署方案&#…

我写过的最蠢的代码

提起这个话题&#xff0c;感慨万千啊。要说最蠢&#xff0c;应该是一个新年庆贺网站。 当时&#xff0c;一个朋友借给我了一个域名。 我当时&#xff0c;还怎么会写代码&#xff0c;刚大一。看到域名都是和网站挂钩的&#xff0c;我就想写一个网站。 后来新年到了&#xff0…

C++之vector::insert与vector::insert应用总结(二百二十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

七天学会C语言-第七天(结构体)

1.定义结构体 例 1&#xff1a;把一个学生的信息(包括学号、姓名、性别、住址等 4 项信息) 放在一个结构体变量中&#xff0c;然后输出这个学生的信息。 #include <stdio.h>struct Student {int student_id;char name[30];char gender;char address[60]; };int main() …

Vue脚手架一站式搭建项目

一、什么是vue-cli 1.1如果你只是简单写几个Vue的Demo程序&#xff0c;那么你不需要VueCLI脚手架。 1.2.如果你在开发大型项目&#xff0c;那么你需要&#xff0c;并且必然需要使用VueCLI。 1.2.1使用Vue.js开发大型应用时&#xff0c;我们需要考虑代码目录结构、项目结构和…

【2023研电赛】华东赛区一等奖:基于EtherCAT通信有限时间位置收敛伺服系统

本文为2023年第十八届中国研究生电子设计竞赛作品分享&#xff0c;参加极术社区的【有奖活动】分享2023研电赛作品扩大影响力&#xff0c;更有丰富电子礼品等你来领&#xff01;&#xff0c;分享2023研电赛作品扩大影响力&#xff0c;更有丰富电子礼品等你来领&#xff01; 基于…

MQ - 22 Kafka集群架构设计与实现

文章目录 导图概述数据可靠性副本拉取 Leader 数据动态维护可用副本集合控制 Leader 切换和数据截断安全控制可观测性总结导图 概述 MQ - 15 集群篇_如何构建分布式的消息队列集群(下)说了基于 ZooKeeper 和 KRaft 来构建集群的两种方式,在这里就不再重复。 这里我们详细分…

【GIS】地理坐标系WGS84、GCJ-02、BD-09、GCS2000

地理坐标系又可分为 参心坐标系 和 地心坐标系&#xff0c;常见的参心坐标系北京54、西安80&#xff0c;常见的地心坐标系有WGS84、GCJ-02、BD-09、GCS2000 地心坐标系 WGS84&#xff08;World Geodetic System 1984&#xff09; WGS84是为 GPS 全球定位系统建立的坐标系统&…

工作流 Flowable 的使用

一、BPMN 业务流程建模与标注 通过 Status&#xff08;状态&#xff09; 字段维护流程状态&#xff0c;流程负责的审批人可能也是 Hard Code&#xff08;硬编码&#xff09;会出现以下问题&#xff1a; 1.流程健壮性差&#xff0c;但凡出现人员变动&#xff0c;或者组织结构调…

数据结构与算法(六)--链表的遍历,查询和修改,删除操作

一、前言 上篇文章我们了解了链表的概念以及链表底层的搭建以及向链表中添加元素的操作。本次我们继续学习链表剩余的操作&#xff1a;遍历&#xff0c;查询和修改、删除操作。 二、链表查询以及遍历 ①获得链表的第index(0-based)个位置的元素&#xff08;不常用&#xff0…

微信定时发圈、跟圈是怎么操作的?

对于私域运营来说&#xff0c;手上都会有几个微信账号需要管理运营&#xff0c;每天需发圈、评论等操作都已经占据大量的时间了&#xff0c;更别说分配时间去做其他的功能做了。 自从用了微信管理工具&#xff0c;提高了运营的工作效率、而且操作非常地简单&#xff0c;还不用…

梯形加减速点动功能块(博途SCL)

梯形速度曲线相关算法介绍,请查看下面博客文章,这里不再赘述,受水平和能力所限文中难免出现错误和不足之处,欢迎大家批评指正,同时感谢大家订阅。 SMART PLC斜坡函数 SMART PLC斜坡函数功能块(梯形图代码)_RXXW_Dor的博客-CSDN博客斜坡函数Ramp的具体应用可以参看下面…

AI人体行为分析:玩手机/打电话/摔倒/攀爬/扭打检测及TSINGSEE场景解决方案

一、AI人体行为分析技术概述及场景 人体姿态分析/行为分析/动作识别AI算法&#xff0c;是一种利用人工智能技术对人体行为进行检测、跟踪和分析的方法。通过计算机视觉、深度学习和模式识别等技术&#xff0c;可以实现对人体姿态、动作和行为的自动化识别与分析。 在场景应用…