立即注册 找回密码

QQ登录

只需一步,快速开始

鼠标移动在文字上面,让其显示详细信息的html代码

2017-11-20 23:23| 发布者: 大师兄| 查看: 858| 评论: 0

摘要: 今天我们来给大家介绍下,关于鼠标移动在文字上面,让其显示详细信息的html代码一、文字太多,以省略号结尾p id="p_0" onmouseover="showTooltip(this);" style="overflow: hidden; text-overflow: ellips ...
今天我们来给大家介绍下,关于鼠标移动在文字上面,让其显示详细信息的html代码
一、文字太多,以省略号结尾


<p id="p_0" onmouseover="showTooltip(this);" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    ${checkContentTitle}
</p>
二、鼠标移动在文字上面,弹出浮动的div让其显示详细信息
<script>  
function showTooltip(target) {  
    document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'block';  
}  
function hideTooltip(target) {  
    document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'none';  
}  
</script>  

<label onmouseover='showTooltip(this);' onmouseout='hideTooltip(this);' id='label0'>把鼠标移到我上面看看...</label>  
<div id='tooltip0' style='display:none;border:1px solid gray;background-color:yellow;color:blue;'><p>这是一段文字的详细信息</p></div>  
三、完整的JSP代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="org.jeecgframework.core.util.ResourceUtil"%>
<% 
    String mobile_home_url = ResourceUtil.getConfigByName("letv.gcr.mobile.home.url");
%>
<script>
function showTooltip(target) {
    document.getElementById(target.id.replace(/^p_/,'div_tip_')).style.display = 'block';
    document.getElementById("div_title").style.display = 'none';
}
function hideTooltip(target) {
    document.getElementById(target.id.replace(/^p_/,'div_tip_')).style.display = 'none';
    document.getElementById("div_title").style.display = 'block';
}
</script>
<div class="nav">
    <div class="return"></div>

    <!--  标题  -->
    <div id="div_title" class="headline">
        <p id="p_0" onmouseover="showTooltip(this);" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            ${checkContentTitle}
        </p>
        <span>${checkContentNum}</span>
    </div>
    <div id="div_tip_0" style="display:none;" class="headline">
        <p id="p_0" onmouseout="hideTooltip(this);">
            ${checkContentTitle}
        </p>
        <span>${checkContentNum}</span>
    </div>

    <div class="home"></div>
</div>

<script>
    var historyBack = "${historyBack}";
    var searchForm = "${SearchForm}"
    var returnUrl = "${returnUrl}";
    $(".return").on("click",function() { // 返回
        if(historyBack == "true") { // historyBack为true
            history.back(-1);
        } else {
            if(searchForm==null||searchForm=="") { // searchForm为空
                if(returnUrl==null || returnUrl=="") { // returnUrl为空
                    location.href=document.referrer;
                }else{ // returnUrl非空
                    var locationUrl = ROOF.Utils.projectName() + returnUrl;
                    window.location.href = locationUrl;
                }
            } else { // searchForm非空
                if(returnUrl==null || returnUrl=="") { // returnUrl为空
                    location.href=document.referrer;
                }else{ // returnUrl非空
                    $("#"+searchForm).attr("action", ROOF.Utils.projectName() + returnUrl);
                    $("#"+searchForm).submit();
                }
            }
        }
    });

    $(".home").on("click",function() { // 主页
        var locationUrl = "<%=mobile_home_url%>";
        window.location.href = locationUrl;
    });
</script>


鲜花

握手

雷人

路过

鸡蛋

最新评论

相关推荐
!jz_fbzt! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-3-28 20:51

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

返回顶部