css實現 : 滑鼠移動上去顯示div,移開隱藏div

來源:互聯網
上載者:User

一、實現效果:

    註:此時滑鼠還沒移進紅色框,紅色框內的內容隱藏起來了

   註:此時滑鼠移到紅色框地區內了,內部隱藏的東西顯示出來了

二、css控制具體代碼:

<span style="color:#330033;"><html><head><title>測試對象轉數組</title><style>.FontStyle{float:left;}.wrap{float:left;}.wrap{border:1px solid white;width:250px;height:20px;margin-left:3px;}.wrap:hover span{display:block;margin-right:10px;}.wrap span{display:none;float:left;}</style></head><body><div class="FontStyle">hi,i am here: </div><div class="wrap">  <span class="label label-primary bstreeadd">添加</span>  <span class="label label-primary bstreeedit">修改</span>  <span class="label label-danger  bstreedel">刪除</span></div></body></html></span>

代碼中需要注意的:如果發現添加、修改、刪除三個選項卡不在一行,將width屬性適度調大點。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.