• 注册
  • 代码教程 代码教程 关注:6 内容:36

    仿B站投稿按钮样式,鼠标移动上去会自动弹出内容

  • 查看作者
  • 打赏作者
  • 9 渡劫 后期

    仿B站投稿按钮样式,鼠标移动上去会自动弹出内容

    <!--仿B站投稿——开始-->
    <div class='lt_blbl_publish'><em>投稿</em>
    <ul style='display: none;'>
    <li onclick='jinsom_publish_power(&quot;words&quot;,&quot;&quot;)'><i class='fa fa-pencil-square-o'></i><span>动态</span></li>
    <li onclick='jinsom_publish_power(&quot;single&quot;,&quot;&quot;)'><i class='fa fa-language'></i><span>文章</span></li>
    <li onclick='jinsom_publish_power(&quot;video&quot;,&quot;&quot;)'><i class='fa fa-toggle-right'></i><span>视频</span></li>
    <li onclick='jinsom_publish_power(&quot;music&quot;,&quot;&quot;)'><i class='fa fa-music'></i><span>音乐</span></li>
    <li onclick='jinsom_publish_power(&quot;follow-bbs&quot;,0,&quot;&quot;)'><i class='fa fa-newspaper-o'></i><span>帖子</span></li>
    <li onclick='jinsom_publish_power(&quot;redbag&quot;,&quot;&quot;)'><i class='jinsom-icon jinsom-hongbao'></i><span>红包</span></li>
    </ul>
    </div>
    
    <style type="text/css">
    .jinsom-menu{width:auto}
    .jinsom-header-right{right:75px}
    .jinsom-header-content{position:relative}
    .lt_blbl_publish{position:absolute;width:68px;right:226px;z-index:99999;top:0;}
    .lt_blbl_publish em{cursor:pointer;display:block;width:100%;line-height:50px;text-align:center;font-size:14px;color:#fff;background-color:var(--jinsom-color);transition:color 0s;font-style:normal}
    .lt_blbl_publish ul{transition:.5s;opacity:.5;width:410px;position:absolute;right:0;top:55px;background:#fff;border-radius:0 0 4px 4px;box-shadow:0 2px 4px rgba(0,0,0,.16);overflow:hidden;z-index:1;list-style:none}
    .lt_blbl_publish li{cursor:pointer;text-align:center;width:68px;height:64px;transition:.2s;float:left;background:#fff}
    .lt_blbl_publish span{color:var(--jinsom-color);width:100%;line-height:22px}
    .lt_blbl_publish i{transition:.2s;color:var(--jinsom-color) !important;font-size:20px;float:right;width:100%;position:relative;top:8px;line-height:33px}
    .lt_blbl_publish li:hover{background:#e5e9ef}
    .lt_blbl_publish li:hover i{top:5px}
    </style>
    
    <script>
    $('.lt_blbl_publish em').mousemove(function(){ $('.lt_blbl_publish ul').show(); $('.lt_blbl_publish ul').css({'top':'50px','opacity':'1'})});
     $('.lt_blbl_publish ul').mousemove(function(){ $('.lt_blbl_publish ul').show(); $('.lt_blbl_publish ul').css({'top':'50px','opacity':'1'})});
     $('.lt_blbl_publish ul').mouseleave(function(){ $('.lt_blbl_publish ul').hide(); $('.lt_blbl_publish ul').css({'top':'55px','opacity':'.5'})}); 
     $('.lt_blbl_publish em').mouseleave(function(){ $('.lt_blbl_publish ul').hide(); $('.lt_blbl_publish ul').css({'top':'55px','opacity':'.5'})});
     $('.lt_blbl_publish li').click(function(){ $('.lt_blbl_publish ul').hide()})
    </script>
    <!--仿B站投稿——结束-->

    请登录之后再进行评论

    登录
  • 任务
  • 偏好设置
  • 到底部
  • 帖子间隔 侧栏位置: