鼠标悬浮显示文字，右击图片复制该文字

男娘i 2023-01-21 09:23 13阅读 0赞

### 右击图片复制id ###

*  右击图片复制id
 *   *  鼠标悬浮显示文字
     *  图片
     *  方法
     *  效果

# 右击图片复制id #

## 鼠标悬浮显示文字 ##

图片的alt属性可以产生鼠标悬浮，显示文字的功能。如果实现不了，可以加上title。  
![在这里插入图片描述][20210515154818146.png]

## 图片 ##

<img
                  class="productLogo"
                  src="../../assets/images/upload/cfd.gif"
                  alt="一些图片信息 "
                  :title="item.id"
                  @contextmenu.prevent="copy(item.id,item.name)"
                />

## 方法 ##

// 右击图片复制id
        copy(id,name) { 
          // 把id赋给data变量
          let data = id;
          // 创建一个input框叫oInput
          let oInput = document.createElement("input");
          // 把id值赋给input框
          oInput.value = data;
          // 在该页面追加一个input框
          document.body.appendChild(oInput);
          // 选择该input框
          oInput.select();
          // 执行复制事件
          document.execCommand("Copy");
          this.$message({ 
            message: "复制产品："+ name + "的id成功",
            type: "success",
          });
        },

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NpZWxfWQ_size_16_color_FFFFFF_t_70]

[20210515154818146.png]: /images/20221020/8418e5be015145dda91c46292648c8a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NpZWxfWQ_size_16_color_FFFFFF_t_70]: /images/20221020/e21e3fabaeab42cc80f501e0977e361b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击网页出现文字

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

港控/mmm°/ 2023年10月02日 03:27/ 0 赞/ 22 阅读

相关商品列表——图片、文字点击/悬浮切换展示

商品列表——图片、文字点击/悬浮切换展示效果图如下：（该图为原创，请勿盗用！） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

电玩女神/ 2023年06月12日 15:26/ 0 赞/ 29 阅读

相关鼠标悬浮显示文字，右击图片复制该文字

右击图片复制id 右击图片复制id 鼠标悬浮显示文字图片方法效果右击图片复制id 鼠标悬浮显

男娘i/ 2023年01月21日 09:23/ 0 赞/ 14 阅读

相关 css hover出现文字,hover显示文字

Simple Tile Hover Effect .tiles \{ width: 1040px; font-size: 0; text-align: center;

矫情吗；*/ 2022年09月02日 14:52/ 0 赞/ 372 阅读

相关鼠标点击不选中文字

前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常

╰半夏微凉°/ 2022年06月05日 08:51/ 0 赞/ 318 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 413 阅读

相关鼠标点击显示冒泡文字

逛网站的时候遇到一个有趣的鼠标点击事件： ![这里写图片描述][Image 1] 点击鼠标会有文字不显示，上漂一定时间后消失。现记录作为收藏具体代码：

谁践踏了优雅/ 2022年05月29日 06:57/ 0 赞/ 317 阅读

相关 html table td 固定长度隐藏文字鼠标进入显示悬浮文字

一.在td的长度范围内要显示大量内容时，为了不破坏布局，只能显示该长度的文字，超过的的文字隐藏。 1.table 表中一定要设置 style="table-la

骑猪看日落/ 2022年04月15日 06:29/ 0 赞/ 962 阅读

相关鼠标点击显示文字效果

需引入jquery.js jQuery(document).ready(function($) { $("html,body").click(fun

柔情只为你懂/ 2022年01月14日 13:09/ 0 赞/ 377 阅读

相关鼠标点击特效·爱心❤和文字

> 爱心特效❤ <script type="text/javascript"> / 网页鼠标点击特效（爱心）/ !fu

末蓝、/ 2021年09月23日 16:30/ 0 赞/ 345 阅读