自定义鼠标提示

阳光穿透心脏的1/2处 2022-05-12 00:12 242阅读 0赞

**一 介绍**

利用position属性来显示隐藏着的<div>标签。当鼠标移动到指定目标时，显示出提示文字“自定义鼠标提示”。

**二 代码**

<script type="text/javascript">
    function showTip(oEvent) 
    {
    	var oDiv = document.getElementById("divTip1");
    	oDiv.style.visibility = "visible";
    	oDiv.style.left = oEvent.clientX + 5;
    	oDiv.style.top = oEvent.clientY + 5;
    }
    function hideTip(oEvent) 
    {
    	var oDiv = document.getElementById("divTip1");
    	oDiv.style.visibility = "hidden";
    }
    </script>
    <body>
    <p>将鼠标移动到红色方框中</p>
    <div id="div1"
     style="background-color: red; height: 50px; width:50px" οnmοuseοver="showTip(event) " οnmοuseοut="hideTip(event)">
    </div>
    <div id="divTip1"
     style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
    <span style="font-weight: bold">自定义鼠标提示</span>
    </div>
    </body>

**三 运行效果**

![ff4e016a-3d43-3e36-a190-f8f6032e01e8.png][]

[ff4e016a-3d43-3e36-a190-f8f6032e01e8.png]: /images/20220512/ee143c410d9b4f378c8244afd3c27d74.png

发表评论取消回复

表情：

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

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

相关阅读

相关 eclipse自定义提示模板

window-->preferences，new即可。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

拼搏现实的明天。/ 2023年12月16日 00:48/ 0 赞/ 14 阅读

相关提示点自定义

1. 描述新图表还可以对提示点的显示内容进行自定义，数据点提示和标签提供内容和样式的完全自定义，用户甚至可以将其设置为 HTML 内容，这里设置的数据点提示，与标签设

待我称王封你为后i/ 2023年10月09日 11:18/ 0 赞/ 70 阅读

相关自定义鼠标移动提示框

背景：有一个界面元素，当鼠标移动到上面后，动态的显示提示信息。 $("labelId").mouseover(function (e) {

拼搏现实的明天。/ 2023年07月07日 05:49/ 0 赞/ 1 阅读

相关全局自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html全局自定义鼠标右键菜单 -

青旅半醒/ 2022年12月27日 02:00/ 0 赞/ 309 阅读

相关局部自定义鼠标右键菜单

文章目录前言一、效果展示二、源代码总结 -------------------- 前言 html局部自定义鼠标右键菜单局

╰+攻爆jí腚メ/ 2022年12月27日 01:59/ 0 赞/ 270 阅读

相关自定义Js温馨提示窗

自定义Js温馨提示窗自己写的Js温馨提示窗，实现鼠标点击图片弹出提示信息，鼠标点击关闭按钮，提示窗消失。基本上全用JQuery代码写成，小巧灵活，可以应用到很多Web项目

港控/mmm°/ 2022年07月27日 14:49/ 0 赞/ 200 阅读

相关自定义提示框鼠标悬停显示样式

需要完成的效果需要完成鼠标移到表格上显示详细信息，对显示信息的展示样式进行修改 -------------------- 效果图 ![这里写图片描述][70]

缺乏、安全感/ 2022年05月18日 04:51/ 0 赞/ 401 阅读

相关自定义AlertDialog消息提示框

自定义AlertDialog消息提示框，大家根据我的代码自行扩展。下图是威哥做的demo消息提示效果图： ![70][] 威哥不喜欢废话，直接上代码。 1、消息提示jav

川长思鸟来/ 2022年05月12日 02:50/ 0 赞/ 376 阅读

相关自定义鼠标提示

一介绍利用position属性来显示隐藏着的<div>标签。当鼠标移动到指定目标时，显示出提示文字“自定义鼠标提示”。二代码 <scri

阳光穿透心脏的1/2处/ 2022年05月12日 00:12/ 0 赞/ 243 阅读

相关鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明 css代码： .question { width: 20px;

短命女/ 2022年03月25日 13:10/ 0 赞/ 381 阅读