2 tianguozhiya tianguozhiya 于 2016.09.21 15:08 提问

用mouseleave和mouseenter实现提示语

怎么样用js实现当鼠标点到用户名的时候提示“双击修改用户名”这句话啊??

 <li id="uName" class="u2">${userName}</li>

在这个上面提示:
图片说明

3个回答

showbo
showbo   Ds   Rxr 2016.09.21 15:32
已采纳
  <li id="uName" class="u2" title="双击修改用户名">${userName}</li>
showbo
showbo 回复tianguozhiya: 你要好看可以找tooltipsy这个jquery插件
接近 2 年之前 回复
tianguozhiya
tianguozhiya 这样可以,不过不太好修改title的样式啊
接近 2 年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.21 16:52
 <style>
 .info{
    width: 150px;
    line-height: 40px;
    border: 1px solid gold;
    background-color: wheat;
    border-radius: 10px;
    position: fixed;
    display: none;
    text-align: center;
    padding: 10px;
 }
 table{
    margin: 20% auto;
 }
</style>
<script type="text/javascript">
    $(function(){
        $("td").hover(function(e){
            //自己加一个判断,e.pageY-90<0或者epageX-60<0的话就设置为0
            //自己调整这个值,就能控制位置
            $('div.info').html($(this).html()).toggle().css({
                "top":e.pageY-90,
                "left":e.pageX-60
            })
        })  
    })
</script>
</head>

<body>
    <div class="info">

    </div>
      <table id="tba">
   <tr>
       <td > Homel</td>
       <td > About</td>
       <td >Subscribe RSS</td>
   </tr>
   </table>
</body>
qq_29594393
qq_29594393 回复tianguozhiya: 选择器,里面你选择一个类 ,然后往你想要生效的对象加上这个类,那么就能对所有对象生效
接近 2 年之前 回复
tianguozhiya
tianguozhiya 那这个可以用在li标签中么
接近 2 年之前 回复
tianguozhiya
tianguozhiya 谢谢诶,非常感谢
接近 2 年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.21 15:15

用 hover 函数了 ,提示的话用title 属性获取属性值,放在div 弹出即可 ,或者自定义值

tianguozhiya
tianguozhiya 可以具体点吗,我弄了半天了,就是不出来啊
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js中自定义mouseenter、mouseleave的写法
首先说一下什么是mouseenter事件: 实际上就是鼠标从外面移到某个元素里面(触发了目标方法)后,鼠标再在里面移动不会重新触发目标方法。moueseleave同理。 本身ie系列浏览器是有onmouseenter这个事件定义的,但是firefox之类的浏览器没有这个,所以只能模拟。 以下提供完美模拟的方法: //ele为目标元素,type为事件类型不用'on',func为事件响应函数
mouseenter和mouseleave的用法(处理mouseover和mouseout乱跳的情况)
$(function(){ $(document).ready(function(){ $("#test").mouseenter(function(){ //在这写有焦点时的逻辑 }).mouseleave(function(){ //写离开后的逻辑 }); }); });
#学习笔记#(6)mouseenter-mouseleave显示隐藏内容-jQuery
mouseenter-mouseleave显示隐藏内容-jQuery label { background-color:green; color:white; font-size:22px; } .div { display:none; } 标签1 标签2 注:鼠标移动到标签上显示对应内容 这是标题1的内容 这是标题2的内容 $(document).ready(functi
jquery中利用on绑定mouseenter事件与mouseleave事件实现鼠标hover事件
//HTML脚本 span data-helperinfo="PortfolioTeam" class="icon help">span> //JS脚本 $(document).on({ mouseenter: function () { var HelpMsgCode = $(this).attr("data-helperinfo"); //
jquery 中的hover(),mouseleave()&mouseenter()和mouseover()&mouseout()的区别
hover(),mouseover(),mouseout(),mouseenter() , mouseleave();
jQuery中的mouseenter和mouseleave事件
前端开发中经常会遇到事件maopo
mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别
// $(function () { $("#div1").mouseover(function () { $("#btn1").val(parseInt($("#btn1").val()) + 1) }) //当鼠标进入div1的时候会触发mouseover事件,因为btn1
IsMouseOver 和MouseEnter\MouseLeave 事件
在界面程序中IsMouseOver 属性用来判断鼠标是否在某个界面元素上悬停。 如果当一个界面元素在逻辑树中被另外一个元素包含,当鼠标同时停在两个元素上的时候,两个元素的IsMouseOver 都是true,无论下面的元素是否被遮住。 当IsMouseOver 属性从false变为true的时候会触发UIElement 的MouseEnter 事件,当IsMouseOver 属性从true变为
JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别
1、mouseover与mouseenter       mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。       mouseenter事件:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。 简单写个例子: Document .over{
jquery hover的使用方法(替代mouseenter()鼠标移进 和mouseleave()鼠标移出)
hover的用法 $(function () { $("#p1").hover(function () { $(this).text("来了") }, function () { $(this).text("慢走") }); }) 一是一个段落