CSS标签悬停

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个基本要素
• 你应该从谷歌分析中了解的5个关键指标
• 我们都不喜欢IE6，但让我们不要幼稚
• 微笑设备
• 交易眼搜索修复(v5)
• 查看我的美丽电子邮件通讯(BEN)

• CSS样式表:

身体{字体:12px/1.5;}.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)，用鼠标输入替换点击应该给你想要的小提琴与鼠标输入

$('.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'对象的引用。