编程论坛 → WEB前端(UI)

css布局问题？请问下面这段代码为什么:hover中的border-bottom不起作用？？

境善发布于 2015-05-27 15:26， 1253 次点击

<style>
body,ul{margin:0;padding:0}
li{list-style:none}
#gallery_tab{
    margin:30px;
    position:relative;
    left:0;
    top:50px;
    }
#gallery_tab ul{
    position:relative;
    height:50px;
    float:left;
    clear:both;
    }
#gallery_tab li{
    position:relative;
    float:left;
    border:1px #CCC solid;
    border-top:none;
    }
li.tab1{
    background:#090;
    }
li.tab2{
    background:#039;
    }
li.tab3{
    background:#060;
    }
li.tab4{
    background:#369;
    }
li.tab5{
    background:#300;
    }
li.tab1:hover{
    background:#099;
    border-bottom:none;
    }
li.tab2:hover{
    background:#099;
    border-bottom:none;
    }
li.tab3:hover{
    background:#099;
    border-bottom:none;
    }
li.tab4:hover{
    background:#099;
    border-bottom:none;
    }
li.tab5:hover{
    background:#099;
    border-bottom:none;
    }
#gallery_tab a{
    float:left;
    display:block;
    margin-top:4px;
    padding:0 6px;
    height:46px;
    line-height:46px;
    background:white;
    }
</style>
</head>

<body>

           
           <div id="gallery_tab">
               <ul>
                   <li class="tab1"><a>ALL</a></li>
                   <li class="tab2"><a>JavaScript Util Functions</a></li>
                   <li class="tab3"><a>UI Components</a></li>
                   <li class="tab4"><a>Framework</a></li>
                   <li class="tab5"><a>Applications</a></li>
               </ul>
           </div>
           
</body>

2 回复

#2

jinjoxie2015-06-03 18:05

你样式中#gallery_tab li的边框优先级比li.tab*:hover中的优先级高，所以不会变。
想要改变，可以提高li.tab*:hover的优先级，把li.tab*:hover改成#gallery_tab li.tab*:hover，或者border-bottom:none;后加个!important

#3

wordyoung2015-09-10 14:53

唉，现在的前端技术，你再说前端技术门槛低，就会被鄙视，不再像以前那样只掌握html、css、js、jq就够了，web前端技术较其他语言技术发展速度快，就拿html5来说,2011年末，当时有很多人迟疑，到了2015年，随便一个简单的游戏，都应用到了html5，再如国内顶级web前端技术服务公司切图网(www.)，与诸多世界五百强公司合作的项目，多数都应用到了html5

1