时间戳

首页 > 解决方案 > 如何避免在活动选项卡中悬停？

html - 如何避免在活动选项卡中悬停？

问题描述

当我将指针移过tabs已经处于活动状态的 ahover时，它上面会出现另一个边框。

如何防止在已经处于活动状态hover的 a 中执行 a 。tabs

ul.tabs-list {
    border-bottom: 2px solid #8563CF;
}
.tab-item {
    font-size: .875em;
    cursor: pointer;
    display: inline-block;
}
.tab-item span {
    padding: 1em;
    display: inline-block;
    font-size: 1.3em;
}
.tab-item span:hover{
    border-bottom: 3px solid #02cfc0;
}
.tab-active span {
    color: #8563CF;
}
.tab-active {
    border-bottom: 3px solid #02cfc0;
}
<div class="horizontal-tab">
    <ul class="tabs-list">
        <li class="tab-item active-tab tab-active">
            <span data-target="#1">All item</span>
        </li>
        <li class="tab-item">
            <span data-target="#2">PHP</span>
        </li>
    </ul>
    <div class="tabs-container">
        <div id="1" class="tab-content tab-content-active" style="">
            <div class="tab-content" style="">
                A
            </div>
        </div>
        <div id="2" class="tab-content" style="display: none;">
            <div class="tab-content" style="">
                B
            </div>
        </div>
  </div>
</div>

标签： htmlcss

解决方案

添加:not(.tab-active)到您现有的规则中，例如.tab-item:not(.tab-active) span:hover{

ul.tabs-list {
    border-bottom: 2px solid #8563CF;
}
.tab-item {
    font-size: .875em;
    cursor: pointer;
    display: inline-block;
}
.tab-item span {
    padding: 1em;
    display: inline-block;
    font-size: 1.3em;
}
.tab-item:not(.tab-active) span:hover{
    border-bottom: 3px solid #02cfc0;
}
.tab-active span {
    color: #8563CF;
}
.tab-active {
    border-bottom: 3px solid #02cfc0;
}
<div class="horizontal-tab">
    <ul class="tabs-list">
        <li class="tab-item active-tab tab-active">
            <span data-target="#1">All item</span>
        </li>
        <li class="tab-item">
            <span data-target="#2">PHP</span>
        </li>
                <li class="tab-item">
            <span data-target="#2">PHP</span>
        </li>
                <li class="tab-item">
            <span data-target="#2">PHP</span>
        </li>
                <li class="tab-item">
            <span data-target="#2">PHP</span>
        </li>
    </ul>
    <div class="tabs-container">
        <div id="1" class="tab-content tab-content-active" style="">
            <div class="tab-content" style="">
                A
            </div>
        </div>
        <div id="2" class="tab-content" style="display: none;">
            <div class="tab-content" style="">
                B
            </div>
        </div>
  </div>
</div>

推荐阅读