CSS 悬停时的 TABS

Question

有什么方法可以操纵此代码，以便一旦您将鼠标悬停在选项卡上，它将成为活动/默认/当前选项卡选择？

这样即使您向下滚动页面并返回也不会返回到 Tab1？

理想情况下我只需要 Pure CSS :)

见代码：

最近的帖子

<li><a href='http://www.kamikazemusic.com/quick-tips/key-metrics-google-analytics/' title='5 key metrics you should know from Google Analytics'>
5 key metrics you should know from Google Analytics</a></li> 
<li><a href='http://www.kamikazemusic.com/general-stuff/ie6/' title='We all dislike IE6 but lets not be childish'>
We all dislike IE6 but lets not be childish</a></li> 
<li><a href='http://www.kamikazemusic.com/general-stuff/smiling-appliance/' title='Smiling Appliance'>
Smiling Appliance</a></li> 
<li><a href='http://www.kamikazemusic.com/quick-tips/trading-eye-search-fixes/' title='Trading Eye Search Fixes (v5)'>
Trading Eye Search Fixes (v5)</a></li> 
<li><a href='http://www.kamikazemusic.com/web-design/beautiful-email-newsletters/' title='Check me out on Beautiful Email Newsletters (BEN)'>
Check me out on Beautiful Email Newsletters (BEN)</a></li> 
<li><a href='http://www.kamikazemusic.com/portfolio/mopay-flash-and-gif-banners/' title='Mopay Flash and GIF Banners'>
Mopay Flash and GIF Banners</a></li> 
<li><a href='http://www.kamikazemusic.com/portfolio/stamford-clothiers/' title='Stamford Clothiers'>
Stamford Clothiers</a></li> 
<li><a href='http://www.kamikazemusic.com/web-development/tradingeye-query-string-search/' title='TradingEye show search query string in URL'>
TradingEye show search query string in URL</a></li> 
<li><a href='http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/' title='The 10 Basics of HTML Email Newsletters'>
The 10 Basics of HTML Email Newsletters</a></li> 
</ul>

最受欢迎的帖子

为什么我们都应该前瞻性思考
Mopay Flash 和 GIF 横幅
斯坦福服装店
TradingEye 在 URL
HTML 电子邮件通讯的 10 大基础知识
您应该从 Google Analytics
IE6大家都不喜欢，但不要幼稚
微笑家电
交易眼睛搜索修复 (v5)
请查看精美的电子邮件通讯 (BEN)

CSS 样式表：

正文{ 字体：12px/1.5 Helvetica，Arial serif； } .clearboth{ clear:both; }

    #csstabs li{ padding:2px;}

    #csstabs{ position:relative; width:500px; height:290px; }
    #csstabs h3{ padding:5px; height:30px; text-align:center; cursor:hand; display:block;       font-size:16px; font-weight:bold; margin:0;
    border-top:1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    }


    .tabcontent{
        padding:10px 0 0 40px;
        width:100%;
        background:#fff;
        border:1px solid #000;
        position:absolute;
        left:0;
        top:40px;
        height:230px;
        display:block;
        margin:0;
    }


    #tab1 .tabcontent{
        z-index:2;
        background:#fff;
    }
    #tab1 h3{
        z-index:3;
        width:150px;
        position:absolute;
        left:0;
        top:0;
        cursor:hand;
        background:#fff;
    }


    #tab2 .tabcontent{
        z-index:1; 
        opacity:0;
    }
    #tab2 h3{
        width:150px;
        position:absolute;
        left:180px;
        top:0;
        cursor:hand;
    }

    #csstabs:hover h3, #tabs:focus h3, #tabs:active h3{
        background:none;
        z-index:0;
        }

    #csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{
        z-index:0;
        opacity:0;
        -webkit-transition : opacity .75s ease-in;
        }

    #tab1:hover h3,#tab1:focus h3,#tab1:active h3{z-index:4;background:#fff;}
    #tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{   z-index:3;  background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}

    #tab2:hover h3,#tab2:focus h3,#tab2:active h3{z-index:4;background:#fff;}
    #tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{   z-index:3;  background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}

Answer 1

根据您发布的 fiddle（使用 jquery），将 click 替换为 mouseenter 应该可以满足您的需求 fiddle with mouseenter

$('.tabbox').on('mouseenter', function(){
   $('.tabbox').removeClass('active');
    $(this).addClass('active');
});

由于您是 jquery 的新手，所以我也解释一下它的作用。

$('.tabbox').on('mouseenter', function(){

这会选择所有带有 class 'tabbox' 的元素，并添加一个 'mouseenter' 事件处理程序，这是后面的函数。所以每次 'mouseenter' 事件发生时，函数都会执行它。

$('.tabbox').removeClass('active');
$(this).addClass('active');

调用该函数时，它做的第一件事是选择所有带有 class 'tabbox' 的元素并从中删除 class 'active'。然后它将 class 'active' 添加到 'this'，'this' 是对 'mouseentered'.

对象的引用

CSS 悬停时的 TABS

CSS TABS on HOVER

javascript

css

jquery

tabs

最近的帖子

最受欢迎的帖子