问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ul下的li下的a标签里的span标签当鼠标划过时span出现。并且span的宽度自适应不要下窜

头像
front_breeze
    511817

    <ul>

    <li![图片描述][1]><a href="#">点击一下<span>浮动出现</span></a></li>

    </ul>

    css
    阅读 4.2k
    3 个回答
    得票最新
    头像
    vsion
      5.1k71839

      谢邀~

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <style>
    span.title{
      position: absolute;
      background: red;
      color: white;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">点我</a></li>
    <li><a href="#">点我</a></li>
    <li><a href="#">点我</a></li>
  </ul>
  <script>
    $(function(){
      $("li a").on("click", function(e){
        $(".title").remove();
        $("body").append("<span class='title' style='left:" + e.clientX + "px; top: " + e.clientY + "px;'>hint</span>")
      });
    });
  </script>
</body>
</html>
      头像
      linong
        29.2k1369138

        谢邀

        a span{visibility: hidden;}
a:hover span{visibility: visible;}

        visibility 不会隐藏位置

        头像
        不爱吃西红柿的鱼
          8.2k21124

          谢邀，这玩意直接css可以完成吧，不需要js的参与。

          今晚上我的梯子出了问题，jsfiddle打不开了，直接上代码了，不能炫酷的点击预览了。

          修好了梯子，点击预览和看代码
          https://jsfiddle.net/2kyLzpLt/

          <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
      .item {
        display: inline-block;
        position: relative;
        min-width: 50px;
        margin: 10px;
        text-align: center;
      }
      
      .item .tips {
        display: none;
      }
      
      .item:hover .tips {
        display: block;
        width: 120px;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top: 10px;
        margin-left: -60px;
        padding: 8px;
        background-color: #444;
        z-index: 10;
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
      }
      
      .tips::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        margin-left: -8px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #444;
      }
    </style>
  </head>

  <body>
    <ul>
      <li class="item"><a href="">01 <span class="tips">aaaaaaa</span></a></li>
      <li class="item"><a href="">02 <span class="tips">aaaaaaa</span></a></li>
      <li class="item"><a href="">03 <span class="tips">aaaaaaa</span></a></li>
      <li class="item"><a href="">04 <span class="tips">aaaaaaa</span></a></li>
      <li class="item"><a href="">05 <span class="tips">aaaaaaa</span></a></li>
    </ul>
  </body>

</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题