首页 新闻 会员 周边 捐助

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

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

如下图：

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

爱因斯坦不爱物理的主页 爱因斯坦不爱物理 | 初学一级 | 园豆：7
提问于：2017-01-07 19:37
< >
分享
最佳答案
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
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。