前端菜鸡养成中
小猫咪的耳朵
效果这样
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;
}