javascript - 悬停上的 CSS TABS

Question

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

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

http://jsfiddle.net/QA5Zp/

理想情况下，我只需要纯 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(分析)的 5 个关键指标
• > 我们都不喜欢 IE6，但不要幼稚
• > 微笑器具
• > 交易眼睛搜索修复 (v5)
• > 在精美的电子邮件通讯 (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

从您发布的 fiddle (使用 jquery)中，将 click 替换为 mouseenter 应该可以提供您想要的 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”对象的引用。