首页 新闻 会员 周边 捐助

导航中的小三角是怎么弄的?

0
悬赏园豆:5 [已解决问题] 解决于 2017-01-08 15:43

如下图:

点到哪个板块,该板块上面就有一个小三角,这是怎么实现的?

爱因斯坦不爱物理的主页 爱因斯坦不爱物理 | 初学一级 | 园豆:7
提问于:2017-01-07 19:37
< > 字节跳动旗下AI助手豆包
分享
最佳答案
0

找一个这样素材的小图标,然后给当前hover的li标签添加背景图片

$(function(){
     $('li').hover(function(){
         $(this).css{"background","url(1.jpg)no-repeat center bottom"}
    //图片定位自己定位,这里定位在li的中间底部,但是没有伸出,改变bottom的值为负值就行了
     }) 
})    

解决了你的问题的话,请采纳哦

收获园豆:5
最美FE | 菜鸟二级 |园豆:207 | 2017-01-07 21:23

你这个回答。。

去冰三分糖 | 园豆:380 (菜鸟二级) | 2017-01-08 01:15
其他回答(3)
0
$(function(){
        $(".abc").eq(0).css('display','block');//默认第一个显示
        $(".container ul li").on('click',function(){
            var index = $(this).index();
            var conRight = $(".abc");
            $(conRight).hide();
            $(conRight).eq(index).show();
        })
    })

 

JoyJin | 园豆:202 (菜鸟二级) | 2017-01-11 17:52
0

首先样式先写好,比如:

a{
  display:block;
  ...    
}
a.active,a:hover{
  background:url(../img/xx.png) no-repeat center top;  
}

其他样式写好,鼠标悬浮的时候即可看到效果。

点击切换样式的,可参考:

$btn.on("click",function(){
    $(this).addClass("active").siblings().removeClass("active");
});

希望以上能帮到你。

aversion | 园豆:215 (菜鸟二级) | 2017-02-04 14:44
0
<ul class="navBar clearfix">
        <li class="item">
            首页
        </li>
        <li class="item cur">
            生活扎记
        </li>
        <li class="item">
            影视分享
        </li>
    </ul>
<style type="text/css">
        .navBar{
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: relative;
            display: inline;
            padding: 0;
            z-index: 1;
        }
        .navBar:before{
            content: "";
            position: absolute;
            left: 0;
            top:0;
            height: 1px;
            width: 100%;
            background-color: #076599;
            z-index: 2;
            -webkit-box-shadow: 0 1px 6px #075f94;
            -moz-box-shadow:  0 1px 6px #076599;
            box-shadow:  0 2px 6px #076599,0 1px 6px #077bb9;
        }
        .item{
            position: relative;
            width: 100px;
            background-color: #d7dfe6;
            color: #444;
            float: left;
            list-style: none;
        }
        .clearfix{
            display: table;
            clear: both;
        }
        .cur:before{
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border: 12px solid #077ab6;
            border-left-color:transparent ;
            border-right-color:transparent;
            border-bottom-color: transparent;
            top:0;
            /*让三角形居中*/
            left: 50%;
            margin-left:-12px ;
        }
    </style>

QxQstar | 园豆:212 (菜鸟二级) | 2017-04-29 21:22
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top