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横幅
Stamford Clothiers
TradingEye在URL
HTML电子邮件简报的10个基础
您应该从Google Analytics中了解的5个关键指标
我们都不喜欢IE6但不能幼稚
微笑的设备
交易眼睛搜索修复（v5）
在Beautiful Email Newsletters（BEN）上查看我

CSS样式表：

体{ 字体：12px / 1.5 Helvetica，Arial serif; } .clearboth { 明确：两者; }

    #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

你发布的小提琴（用jquery），用mouseenter替换click应该给你想要的东西fiddle with mouseenter

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

由于你是jquery的新手，让我解释一下它的作用。

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

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

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

调用函数时它首先要做的是，它选择所有带有“tabbox”类的元素，并从中删除“active”类。然后它将类'active'添加到'this'，'this'是对'mouseentered'对象的引用。

HOVER上的CSS TABS

最新帖子

最受欢迎的帖子

1 个答案: