鼠标移到某一元素则在某一元素出现弹出框

最新推荐文章于 2021-05-30 21:39:22 发布
最新推荐文章于 2021-05-30 21:39:22 发布
阅读量274 收藏
点赞数
文章标签： java xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yinxiaofeng/archive/2012/07/31/2617176.html
版权

注：使用前应先引入jQuery包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>框框随着鼠标点击的元素的位置改变而改变</title> 
    <style type="text/css"> 
    a{  
    border: 1px solid #0f0;  
    margin: 20px;  
    width: 60px;  
    height: 30px;  
    line-height: 30px;  
    float: left;  
    display: block;  
    text-align: center; 
    
    }  
    .pop{  
        width: 350px;  
        height: 200px;  
        border: 1px solid #00f;  
        background-color: #ffffee;  
        display: none;  
        position:absolute;  /* 注：弹出框必须为绝对定位 */  
    }  
    </style> 

    <script src="../js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function hidedetails() {
            $("#details").hide();
        }
        function showdetails(thisObj, orderid) {
            var d = $(thisObj);
            var pos = d.offset();
            var t = pos.top + d.height() + 5; // 弹出框的上边位置  
            var l = pos.left + d.width() + 5;  // 弹出框的左边位置  
            $("#details").css({ "top": t, "left": l }).show();
            $("#details").html("订单 " + orderid + " 的内容！");
        }  
    </script> 
</head> 
<body> 
<a href="javascript:void(0)" οnmοuseοver="showdetails(this,1)" οnmοuseοut="hidedetails()">订单1</a> 
<a href="javascript:void(0)" οnmοuseοver="showdetails(this,2)" οnmοuseοut="hidedetails()">订单2</a> 
<a href="javascript:void(0)" οnmοuseοver="showdetails(this,3)" οnmοuseοut="hidedetails()">订单3</a> 
<a href="javascript:void(0)" οnmοuseοver="showdetails(this,4)" οnmοuseοut="hidedetails()">订单4</a> 
<a href="javascript:void(0)" οnmοuseοver="showdetails(this,5)" οnmοuseοut="hidedetails()">订单5</a> 
<div id="details" class="pop"> 
</div> 
</body> 
</html>

转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/07/31/2617176.html

weixin_33971977
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现鼠标移到元素上动态提示消息框效果
01-19
当光标移动到某些元素上时，会弹出像tips的提示框。 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>...
js：获取鼠标点击位置，弹出提示框
彭世瑜的博客
06-19 1893
/ 监听鼠标点击事件。
js实现鼠标移上去显示详细信息
yihuliunian的博客
06-22 3763
转载自品略图书馆http://www.pinlue.com/article/2018/09/2614/177365783206.html 效果是：鼠标移动到某个位置，显示这个位置对应的详细信息。 <style type="text/css"> li { cursor:pointer; list-style:none; width:200px; height:20px; border:1px solid #999; } </style></p> <ul&gt..
如何在元素上显示提示框或者实现弹窗提示
Callback的博客
07-24 2250
今天要实现一个如果输入错误就提示正确答案的需求，最开始的想法是直接在原输入框显示正确答案，但是这样很丑陋，但是又因为这个项目主要的功能和界面已经写好，我只是负责维护和进行小的修改，所以想了想如何实现在原输入框错误的情况下弹框或者别的弹框方式。 一开始经过查询，在网上找到了这样效果 但是这种是纯CSS实现的，实现的手法还有一点复杂，对于我想要快速实现维护的需求不是那么贴合，但是有想要纯手动实...
html5鼠标载入弹出信息框,基于HTML5 Canvas 实现弹出框效果
weixin_42128315的博客
05-30 745
用户鼠标移入时，有弹出框出现，这样的需求很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中，这种...
鼠标滑至某位置，在鼠标旁边出现详情弹窗div
ang2663956的博客
11-12 1068
首先效果如下： 代码如下： //这个是一个循环，循环所有name为xx的td标签(也就是给tdname为XXX的添加事件）$("td[name='strGoodsSKU']").each(function(index,item){ var oldTest = $(this).text(); //如果td里的te...
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
10-27
具体思路为：.首先要定位实现这种效果的元素 ，本次通过class；如果是动态显示不同的提示内容，需设置title;通过JQ给定位到元素加上 mouseover 和mouseout 事件
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
11-23
如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 1 设置延时， 超过该延时未移入弹窗则弹窗隐藏 ...
jquery 鼠标移入显示悬浮框
09-10
本主题聚焦于"jQuery 鼠标移入显示悬浮框"，这是一个常见的交互设计元素，用于提供额外的信息或者功能，提升用户体验。以下将详细解释这个知识点。 首先，我们要理解悬浮框（通常称为 tooltip）的基本概念。Tooltip...
JS实现侧边栏鼠标经过弹出框+缓冲效果
10-20
在这个例子中，我们有两个`div`元素，一个作为外层容器`#box`，另一个作为弹出框`#share`。默认情况下，`#share`被定位在`#box`的右侧，完全隐藏。当鼠标移到`#box`上时，我们将通过调整`#box`的`left`属性，使其从...
arcgis 自定义弹出窗口
11-14
网上很少资料有解决arcgis for silverlight 的这个问题的，本人也搞了好久才解决的，所以分值高了一点，如代码有问题，可以联系我。
python点击弹出悬浮框_“鼠标移入显示悬浮框”特效【转】
weixin_33188789的博客
01-13 1136
1、效果说明在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向2、实现原理分析1、结构分析由于悬浮层有可能从上下左右四个方向滑入目标块，因此需要先针对结构进行处理。在此，可以通过两种方法实现“悬浮层”。一种方法是为每个块定位四个悬浮块(上下左右)，当满足鼠标移入的条件时，让相应的悬浮块滑入；第二种方法是只为每个块定位一个...
Vue、JS点击元素，该位置出现弹出框，且可跟鼠标滚动而移动
huangfuyk.的博客
05-27 4504
在平时开发当中，可能会遇到这样的需求：我在某一特定位置点击元素，当前点击位置出现弹出框，且弹出框可跟随鼠标滚动而移动。 例如当我点击下图“眼睛”图标时，要在点击位置弹出一个框，显示点击的该条数据内容。并且当我滚动鼠标时，该弹出框会随着“眼睛”一起移动，相对位置不变。 如下图所示： （1）首先给弹出框绑定一个动态top以及left值 代码如下： <span :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }".
鼠标移入就显示弹框，移出弹框就消失
java_zhaoyanli的专栏
08-08 7905
html: 菜单 香蕉 苹果 鸭梨 橙子 css: #menu{ width:8.
鼠标移到某一元素则在元素旁边出现弹出框(JQuery)
weixin_34408624的博客
05-12 486
   类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会弹出一个框，位置随位置的改变而改变，代码如下：  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xml...
鼠标滑到某元素标签弹出div浮动框及其关闭
hello___everyone的博客
08-30 4323
css： .more111{ top:event.clientY+10; left:event.clientX-330; z-index:1; position:absolute; } html 元素 更多条件 div：
HBuilder制作一个鼠标感应程序，当鼠标进到页面上某段文字时，弹出提示框。
最新发布
05-23
你可以使用以下代码实现这个...这段代码会在页面上创建一个段落和一个空的 `<div>` 元素，并在鼠标移到段落上时显示提示框。当鼠标移出段落时，提示框会隐藏。你可以根据需要修改 `<p>` 元素中的文本和提示框的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值