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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 wpf界面一直接收PLC给过来的信号,导致UI界面操作起来会卡顿
- ¥15 运动想象脑电信号数据集.vhdr
- ¥15 三因素重复测量数据R语句编写,不存在交互作用
- ¥15 微信会员卡等级和折扣规则
- ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
- ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
- ¥15 gdf格式的脑电数据如何处理matlab
- ¥20 重新写的代码替换了之后运行hbuliderx就这样了
- ¥100 监控抖音用户作品更新可以微信公众号提醒
- ¥15 UE5 如何可以不渲染HDRIBackdrop背景