鼠标移动到文本，显示DIV的信息

最新推荐文章于 2023-05-27 11:56:33 发布
最新推荐文章于 2023-05-27 11:56:33 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 学习笔记 C#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongbi1993/article/details/79895641
版权

页面文件：

<head runat="server">
     <style>
         #moveinfo {
             position: absolute;
             visibility: hidden;
             overflow: hidden;
             border: 1px solid #CCC;
             background-color: #F9F9F9;
             border: 1px solid #333;
             padding: 5px;
         } 
     </style>

</head>

<body>

<p οnmοuseοver="Trigger(event,'<%#Eval("Pk_Accnt")%>')" οnmοuseοut="hidePopup()"><a href="#" οnclick="MainAccountTreat('<%#Eval("Pk_Accnt")%>')"><%# decimal.Parse(Eval("ActualRate").ToString()).ToString("F2") %><span style="color:red"><%#Eval("Change") %></span></a></p>

<div id="moveinfo">
        <%Response.Write(HTMLSTR); %>
</div>

</body>

js文件：

//鼠标移入显示div
function Trigger(event, pk_accnt) {
    var movex;
    var movey;
    var e = event || window.event;
    if (e.x || e.y) {
        movex = e.x;
        movey = e.y + 20;
    }
    var html = HotelManager.Web.general.AccCenter.MainAccount.GetWeek(pk_accnt).value;//C#后台处理好的html
    var popUp = document.getElementById("moveinfo");
    popUp.style.top = movey + "px";
    popUp.style.left = movex + "px";
    popUp.style.width = "490px";
    popUp.style.visibility = "visible";
    popUp.innerHTML = unescape(html);
}
//鼠标移除隐藏div
function hidePopup() {
    var popUp = document.getElementById("moveinfo");
    popUp.style.visibility = "hidden";

}


C#后台文件：

public string HTMLSTR = string.Empty;

public string GetWeek(string pk_accnt)

{
            GetCache();
            string html = "";
            html += "<table>";
            html += "<tr>";
            html += "<td width=\"70px\">星期日</td>";
            html += "<td width=\"70px\">星期一</td>";
            html += "<td width=\"70px\">星期二</td>";
            html += "<td width=\"70px\">星期三</td>";
            html += "<td width=\"70px\">星期四</td>";
            html += "<td width=\"70px\">星期五</td>";
            html += "<td width=\"70px\">星期六</td>";
            html += "</tr>";
            //循环房价
            html += "<tr>";
            BLL.Account acc = new BLL.Account();
            DataTable dt = acc.GetWeekday(pk_accnt, StoreID);
            int num = 0;
            string TotalCharge = "0";
            string ActualRate = "0";
            string span = "";
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    TotalCharge = dt.Rows[i]["TotalCharge"].ToString().Split('.')[0];
                    ActualRate = dt.Rows[i]["ActualRate"].ToString().Split('.')[0];
                    span = "<td width=\"70px\"><span style=\"color: red\">" + TotalCharge + "</span>/" + ActualRate + "</td>";


                    if (dt.Rows[i]["wek"].ToString() == "星期日")
                    {
                        html += "<tr>" + span;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期一" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td>" + span;
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期二" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td><td width=\"70px\"></td>" + span;
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期三" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td>" + span;
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期四" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td>" + span;
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期五" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td>" + span;
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() == "星期六" && num == 0)
                    {
                        html += "<tr><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td><td width=\"70px\"></td>" + span + "</tr>";
                        num++;
                    }
                    else if (dt.Rows[i]["wek"].ToString() != "星期六" && num > 0)
                    {
                        html += span;
                    }


                    if (dt.Rows[i]["wek"].ToString() == "星期六" && num > 0)
                    {
                        html += span + "</tr>";
                    }
                }
            }
            html += "</tr>";
            html +="</table>";
            HTMLSTR = html;
            return html;

        }

效果图：


菜鸟_xiao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标移动到div上显示制定信息或者div（自适应显示位置）
10-11
鼠标移动到div上弹出div或者信息，并且自适应显示位置；每一步代码都有详细的解释；简单，通俗易懂
css和js做一个鼠标悬浮在div容器上面的时候，展示一些文字（css实现）(hover)
m0_68094390的博客
05-27 1864
【代码】css和js做一个鼠标悬浮在div容器上面的时候，展示一些文字（css实现）
css和js做一个鼠标悬浮在div容器上面的时候，展示一些文字(hover)
m0_68094390的博客
05-27 2019
【代码】css和js做一个鼠标悬浮在div容器上面的时候，展示一些文字(hover)
CSS实线鼠标移入显示隐藏div
qq_67413159的博客
04-08 7305
用CSS中的 hover 事件，实线鼠标移入显示隐藏元素。 效果如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>移入显示</title> <style> .hov{ width: 300px; background-color: #FFA500; border-radius:..
div或button添加鼠标悬浮提示信息的多种方法小结vue
weixin_43312391的博客
03-18 2万+
1.利用elementUI组件里的Tooltip 文字提示实现 原始页面： 实现效果：当鼠标悬浮在上左按钮时，出现提示信息 实现代码： <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> </el-tooltip> 参数说明： 参数 说明 类
jqeruy 插件 鼠标经过显示文本信息
07-15
这是个jquery 插件，作用是当鼠标经过图片是会显示底部影藏的div效果有好几种都是自己私藏的好东西，希望大家能够有用！
layui实现鼠标移动到单元格上显示数据的方法
01-19
//title是纯文本 title : '用户姓名>用户姓名</span>', width : 150, align : 'center', //下面的是从数据库里取出来的数据 templet:'<div><span title={{d.year}}>{{d.year}}</span></div>' //判空 /*templet:'<div...
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
12-29
具体代码如下所示： <div> <div> {{item.id}} </div> <div mouseover=mouseenterHander(item.id) mouseout=mouseoutHander(item.id)> {{item.name.substr(0, 8)}} </templ
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
css实现 ： 鼠标移动上去显示div,移开隐藏div
热门推荐
dkvirus
07-11 6万+
一、实现效果：     注：此时鼠标还没移进红色框，红色框内的内容隐藏起来了    注：此时鼠标移到红色框区域内了，内部隐藏的东西显示出来了 二、css控制具体代码： 测试对象转数组 .FontStyle{float:left;} .wrap{float:left;} .wrap{border:1px solid white;width:250px;height
鼠标经过显示隐藏div
06-24
鼠标经过显示隐藏层js，隐藏层可加css样式，可随意控制大小，js有详细注释
鼠标移上显示一个div的代码
03-31
鼠标移上能弹出一个div 的下拉框，可以点击里面的链接，鼠标移开是关闭下拉框
鼠标移动到div上显示子div实现要点
呆若木鸡的专栏
03-19 5578
本例实现这样一个效果，当鼠标移动到div元素上时，显示子div，并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候，重叠在后面其他div上，不能挤压后面其他div。网上找了很多例子没法完全达到这个效果，自己经过各种试验折腾了一天才搞出来，记录下来备忘。 本例使用CSS样式来控制，先贴代码： 无标题文档
鼠标移到某个div需要显示该div下面的列表时
sly94的博客
03-31 1370
实例： 当鼠标移到购物车上时，显示购物车的列表。 问题： 由于之前购物车是一个dom，购物车列表是另一个DOM，因此用到mouseover和mouseout时，鼠标只要离开购物车购物车列表就会消失，根本选不中购物车列表页。 解决方案： 在购物车DOM和购物车列表DOM上添加个父类DOM，然后对这个父类DOM添加mouseover和mouseout事件。 当鼠标移到购物车上时，调用mou
css鼠标放上div显示文字,使用css在鼠标悬停上显示div文本
weixin_35474374的博客
08-03 4433
我是新来的css和ui设计。 这是这种情况。 我有一个div(divmain)。在divmain里面，我有一个图像和另一个div(sub_div)。有sub_div内的文本，我想显示在鼠标悬停，隐藏，否则使用只是CSS(无javascript/jquery)。 请提出我应该遵循的方法。使用css在鼠标悬停上显示div文本现在我做这样的事情：HTML： Some Text的CSS：.divmain ...
div +css 添加鼠标放上去显示提示文字
不敲代码的码农的博客
08-08 5万+
有时候我们需要鼠标移到某个div，列表的某行某列或某个按钮上时显示出提示文字，此时 我们只需设置title即可： 效果如图：
C#发送POST请求到WebService
博客
09-04 3830
C#发送POST请求到WebService GC.Collect();//垃圾回收 //发起请求 Uri uri = new Uri(Url); WebRequest webRequest = WebRequest.Create(uri); webRequest.ContentType = "text/xml; charset=utf-8"; webRequest.Method = "
js添加、删除 DropDownList
博客
03-27 1126
页面：&lt;asp:DropDownList ID="ddlShift" runat="server" TabIndex="2" Width="136px"&gt;&lt;asp:ListItem Value="1"&gt;早&lt;/asp:ListItem&gt;&lt;asp:ListItem Value="2"&gt
鼠标移动到div变成小手
最新发布
06-10
您可以使用CSS中的cursor属性来实现这个效果。具体来说，您可以将div的样式设置为： ``` div { cursor: pointer; } ``` 当鼠标移动到该div上时，光标将变为小手形状。当然，您可以根据自己的需求选择不同的光标形状，例如： ``` div { cursor: crosshair; /* 十字线 */ cursor: help; /* 帮助 */ cursor: move; /* 移动 */ cursor: not-allowed; /* 禁止 */ cursor: progress; /* 进度 */ cursor: text; /* 文本 */ cursor: wait; /* 等待 */ } ``` 希望能够帮助到您！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值