模仿tmall 小猫咪的耳朵

最新推荐文章于 2024-05-19 09:39:32 发布

Ink_cherry

最新推荐文章于 2024-05-19 09:39:32 发布

阅读量811

点赞数

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/Ink_cherry/article/details/68950103

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端菜鸡养成中
小猫咪的耳朵

效果这样这里写图片描述
html

 <div id="inner-con">
    <div id="catalogtype">
        <div id="text">商品分类</div>
    </div>  
   <div id="normallist">
     <a id="firsta" href="">天猫超市<div class="hovericon"></div></a>
     <a href="">天猫国际<div class="hovericon"></div></a>
     <a href="">品牌街  <div class="hovericon"></div></a>
     <a href="">电器城<div class="hovericon"></div></a>
     <a href="">喵鲜生<div class="hovericon"></div></a>
     <a href="">营业厅<div class="hovericon"></div></a>
     <a href="">魅力惠<div class="hovericon"></div></a>
     <a href="">飞猪旅行<div class="hovericon"></div></a>
     <a href="">苏宁易购<div class="hovericon"></div></a>
   </div>
</div>

css

#inner-con .hovericon
{  
    position: absolute;
    top:1px;
    left:28%;
    width:40px;
    height:15px;
    /*background-color: black;*/
    background:url(img/hover.jpg);
    z-index: -88;
    transition:all .25s;
}
#normallist a:hover .hovericon
{
    transform:translate(0px,-13px);

}
#inner-con
{   position: relative;
    display: inline-block;
    height:36px;
    width:100%;
        background-color: #DD2727;
}
#catalogtype
 {  display: inline-block;  
    margin-left: 7px;
    background-color:yellow;
    width:200px;
    height:36px;
        background-color: #C60A0A;
}