css -- hover伪类

最新推荐文章于 2025-03-05 21:40:55 发布

转载最新推荐文章于 2025-03-05 21:40:55 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hf8051/p/4742421.html

本文介绍了一种使用CSS实现按钮在鼠标悬停时显示的方法。通过:hover伪类选择器配合特定的样式设置，使得按钮在正常状态下隐藏，在悬停状态下显示。

CSS代码：

　　.btn-setDefaultGateway{display: none;}
    .netDiv:hover span .btn-setDefaultGateway {
        display: inline; //移动到类为 netDiv 的 div 中，其下面的 span 标签中的 button 标签的样式设为 display:inline;(只当下对应的改变，其他的不变)
    }


HTML代码：

 <div class="netDiv">
     <span>
         <button class="btn-setDefaultGateway btn btn-danger" data-gateway="">设为默认上网接口</button>
     </span>
</div>
 <div class="netDiv">
     <span>
         <button class="btn-setDefaultGateway btn btn-danger" data-gateway="">设为默认上网接口</button>
     </span>
</div>
 <div class="netDiv">
     <span>
         <button class="btn-setDefaultGateway btn btn-danger" data-gateway="">设为默认上网接口</button>
     </span>
</div>
 <div class="netDiv">
     <span>
         <button class="btn-setDefaultGateway btn btn-danger" data-gateway="">设为默认上网接口</button>
     </span>
</div>