Aganstrong 2021-03-06 10:07 采纳率: 56.6%
浏览 91
已结题

实现前端效果，请教一下

  • 写回答

7条回答 默认 最新

  • wanmeikakaxi 2021-03-06 17:22
    关注

    给你修改了。

    动态效果图。

    代码

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实现前端效果，请教一下</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="form-group" style="margin: 100px 100px;">
    <label style="float: left;">请把鼠标指向input框</label>
    <div class="tipbox col-sm-2">
      <input type="text" class="form-control tooltip-show" id="tooltip-show" placeholder="点击输入内容" autocomplete="off">
    </div>
  </div>
<script>

$(function(){

$("#tooltip-show").on("mouseenter", function () {

                    var _this = this;

                    $(".tipbox").prepend("<span id='edits' onclick='addedits();' style='cursor:default;z-index:1;position:relative;right:-100px;background:#08d6f8;padding:0px 10px;margin:-35px 0px 0px 0px;color:#fff;float:right;'>点击编辑</span><span class='line' style='position:absolute;width:27px;height:100px;text-indent:5px;background:linear-gradient(145deg,transparent 49.5%,#08d6f8 49.5%,#08d6f8 50.5%,transparent 50.5%);z-index:1;right:-12px;margin:-58px 0px 0px 0px;'></span>");

                    $(this).siblings("#edits").on("mouseleave", function () {

                        $("#edits, .line").remove();


                    });

                }).on("mouseleave", function () {


                    setTimeout(function () {


                        if (!$("#edits:hover").length) {


                            $("#edits, .line").remove();

                        }


                    }, 100);


                });


});
function addedits() {

       $("#tooltip-show").focus();

      };
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 7月24日

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！