鼠标经过，提示框

淡淡的烟草味﹌ 2024-02-17 15:08 60阅读 0赞

1.  html元素如下：
2.  <</span>div style="POSITION: relative">
3.  <</span>span id="searchLable">搜索</</span>span>
4.  <</span>img style="CURSOR: pointer" id="searchImg" alt="" src="search.jpg">
5.  </</span>div>
6.  注意：其中设置提示框的定位方式为absolute，绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果没有已定位的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，可能是BODY或HTML元素）。
7.  其中css代码如下：
8.  <</span>style type="text/css">
9.  \#searchLable \{
10. position: absolute;
11. top: \-15px;
12. white-space: nowrap;
13. background: \#FBF7EA;
14. border: solid 1px \#FFB400;
15. \}
16. </</span>style>
17. 其中js代码如下：
18. <</span>script type="text/javascript">
19. window.onload = function()\{
20. var searchImg = document.gegetElementById("searchImg");
21. //鼠标经过，显示提示框
22. searchImg.onmouseover = function()\{
23. document.getElementByIdx\_x("searchLable").style.display="block";
24. \};
25. //鼠标移出，隐藏提示框
26. searchImg.onmouseout = function()\{
27. document.getElementByIdx\_x("searchLable").style.display="none";
28. \};
29. //单击鼠标，执行搜索
30. searchImg.onclick = function()\{
31. //......
32. \};
33. \};
34. </</span>script>

发表评论取消回复

表情：

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

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

相关阅读

相关鼠标经过，提示框

1. html元素如下： 2. <</span>div style="POSITION: relative"> 3. <</span>span id="searchLab

淡淡的烟草味﹌/ 2024年02月17日 15:08/ 0 赞/ 61 阅读

相关 css实现鼠标触碰时显示提示框，鼠标移开时隐藏提示框

css实现鼠标触碰时显示提示框，鼠标移开时隐藏提示框解决方法：效果图：鼠标触碰到问号时提示。 ![20191211153618285.png][] css：[

àì夳堔傛蜴生んèń/ 2023年06月21日 05:59/ 0 赞/ 11 阅读

相关鼠标经过显示大图

代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

深藏阁楼爱情的钟/ 2022年12月19日 03:58/ 0 赞/ 164 阅读

相关 css 鼠标经过显示禁止符号

鼠标经过是显示红色圆圈加斜杠的禁止图标 cursor: no-drop; cursor: not-allowed; 代码： .box:hove

太过爱你忘了你带给我的痛/ 2022年11月19日 04:03/ 0 赞/ 308 阅读

相关 css3鼠标经过，图片旋转

<style> .navigation:hover .img { -webkit-transition:0.4s linear;transition:0.4s ease

浅浅的花香味﹌/ 2022年06月10日 08:58/ 0 赞/ 276 阅读

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

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

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

相关中国地图鼠标经过省份热点弹出提示信息的网页特效

把下面代码复制一下放到txt中保存成html就可以了： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition

短命女/ 2022年04月12日 07:17/ 0 赞/ 131 阅读

相关解决Eclipse 鼠标悬停提示框是黑色的

一、问题 Eclipse中鼠标悬停在代码上出现提示框，但是提示背景色是黑色的，造成提示的内容看不到，这个提示框的背景色在哪里修改，我的eclipse版本号是oxyge

╰+攻爆jí腚メ/ 2022年02月26日 06:20/ 0 赞/ 393 阅读

相关扩展:datagrid鼠标经过提示单元格内容

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="

妖狐艹你老母/ 2021年11月22日 11:04/ 0 赞/ 242 阅读

相关扩展:datagrid鼠标经过提示单元格内容

$.extend($.fn.datagrid.methods, { / 开打提示功能 @pa

╰半橙微兮°/ 2021年06月24日 14:00/ 0 赞/ 433 阅读