css3鼠标悬停选项卡

CSS3鼠标悬停选项卡是一种常用于网页设计的技术，可以使网页的交互性更加丰富，用户体验更加友好。

要实现鼠标悬停选项卡，需要一些基本的HTML结构和CSS样式。下面是一个实现悬停选项卡的例子：

 <div class="tab-container">
        <ul class="tabs">
            <li class="active">Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active">
                <p>Tab 1 content.</p>
            </div>
            <div class="tab-pane">
                <p>Tab 2 content.</p>
            </div>
            <div class="tab-pane">
                <p>Tab 3 content.</p>
            </div>
        </div>
    </div> 

上面这个例子中，通过HTML的结构将选项卡和对应的内容分别放到一个ul列表和一个div容器中，然后用CSS样式来设置选项卡的效果。

下面是CSS样式的代码：

 .tab-container {
        position: relative;
    }

    .tabs {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #ccc;
    }

    .tabs li {
        float: left;
        margin-right: 30px;
        font-size: 16px;
        line-height: 24px;
        cursor: pointer;
        padding: 10px 15px;
        background-color: #eee;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .tabs li.active {
        background-color: #fff;
        border-bottom-color: transparent;
    }

    .tabs li:hover {
        background-color: #ddd;
    }

    .tab-content {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .tab-pane {
        display: none;
        padding: 20px 0;
    }

    .tab-pane.active {
        display: block;
    } 

上面这个CSS样式中，我们对选项卡的样式进行了设置，包括背景色、边框、圆角等。我们还为选项卡和选项卡对应的内容设置了hover效果和显示效果，当鼠标悬停在选项卡上时，背景色变浅，当选中一个选项卡时，对应的内容就会显示出来。