使用懸停和添加/刪除類問題

我是JQuery的新手，並且在練習中遇到了一些麻煩。我正在使用懸停功能來更改文本。問題是文本正在改變，但文本不是繼承我想要的類屬性。使用懸停和添加/刪除類問題

這裏是一個的jsfiddle我的問題：http://jsfiddle.net/byMUy/

的#basecamp應當自收到「隱藏」類屬性（或全部爲每個元素選擇）。當我懸停時（在左下方的第一個框中）。文本更改但它不繼承我想要的類（隱藏）。當我懸停後檢查源代碼時，我發現該類更改爲隱藏。我想弄清楚如何確保我的「隱藏h1，隱藏h5等」被繼承，我認爲這可能是問題所在。

我的主要問題是：我懸停後（在左下方的框中）爲什麼我的新文本不會繼承我的CSS隱藏屬性？它應該看起來非常類似於懸停前的樣子，標題文本只是改變了。

這是我的源代碼：

謝謝！

**我意識到我的「功能」在我的jquery完成，因爲我的懸停尚未填寫。我主要關注的是讓第一部分正確。

HTML：

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="main.css"> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="application.js"></script> 
     <title>37signals</title> 
    </head> 

    <body> 
     <nav> 
      <ul> 
       <li><a href="#">Company blog</a> 
       </li> 
       <li><a href="#">Our story</a> 
       </li> 
       <li><a href="#">Follow us on Twitter</a> 
       </li> 
       <li><a href="#">System status</a> 
       </li> 
       <li><a href="#">Sign in</a> 
       </li> 
      </ul> 
     </nav> 
     <div class="header"> 
      <img src="images/logo-37s-large.png" alt="37signals" /> 
      <h1>Making collaboration productive and enjoyable for people every day.</h1> 

      <h5>Frustration-free web-based apps for collaboration, sharing information, and making decisions.<h5> 
    </div> 



    <div class = "hidden" id ="basecamp"> 
     <img src= "images/logo-37s-large.png" alt="37signals" /> 
     <h1><a href="#">Basecamp</a> is the project management tool you wish you had on your last project</h1> 
     <h5>Are you still managing projects with email? Are you still using Excel for your to-do lists? It's time to upgrade to Basecamp. Manage projects and collaborate with your team and clients the modern way.</h5> 
      <div class="hidden arrow"> 
       <img src="images/arrow-left.png"> 
      </div> 
     </div> 
     <section class="basecamp"> <a href="#" class="bc"> 
      <img src = "images/logo-bc.png"/> 
      <h3>Basecamp<sup>&reg;</sup><h3> 
      <h4>Manage Projects</h4> 
      <p>Used by millions for project management</p> 
     </a> 
<a href="#" class="hr"> 
      <img src="images/logo-hr.png" /> 
      <h3><span>Highrise</span><sup>&reg;</sup></h3> 
      <h4>Manage Contacts</h4> 
      <p>Know the people you do business with.</p> 
      </a> 
<a href="#" class="cf"> 
      <img src="images/logo-cf.png" /> 
      <h3><span>Campfire</span><sup>&trade;</sup></h3> 
      <h4>Work in Real-Time</h4> 
      <p>Group chat rooms for your business.</p> 
      </a> 

     </section> 
     <hr /> 
    </body>

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
/* START */ 

a { 
    text-decoration: none; 
    color: #369; 
} 

section { 
    margin: 30px auto; 
    width: 825px; 
    display: block; 
} 

sup { 
    color:#999; 
    font-weight: normal; 
    font-size: 11px; 
} 

hr { 
    background: url('images/img-hr.png') no-repeat scroll 50% 50%; 
    clear: both; 
    border: none; 
    color: transparent; 
    height: 12px; 
} 

@font-face { 
    font-family: CrimsonSemiBold; 
    src: url('Crimson-Semibold.otf'); 
} 

@font-face { 
    font-family: CrimsonRoman; 
    src: url('Crimson-Roman.otf'); 
} 


/* NAV BAR */ 

nav { 
    min-width: 100%; 
    height: 48px; 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; 
} 


nav ul { 
    float: right; 
    font-family: Arial, Verdana; 
    margin: 12px 18px; 
    padding: 10px 30px; 
} 

nav li { 
    margin: 15px 5px 15px 6px; 
    padding: 5px 4px; 
    font-size: 12px; 
    display: inline; 
    color: #369; 
} 

.header { 
    clear: both; 
    width: 829px; 
    height: 163px; 
    margin: 0 auto; 
    padding: 6px 0; 
    text-align: center; 
    font-family: "CrimsonSemiBold", "Times New Roman", Georgia, serif; 
} 

.header h1 { 
    font-weight: 500; 
    font-size: 58px; 
    line-height: 1em; 
    margin: 10px 0 20px 0; 
    letter-spacing: -2px; 
    color: #232323; 
    clear: both; 
} 

.header h5 { 
    font-weight: 500; 
    font-size: 20px; 
    line-height: 1.5em; 
    margin: 10px 0; 
    color: #222; 
} 
/* jquery hidden classes */ 

.hidden { 
    display:none; 
    clear: both; 
    text-align: center; 
    font-family: "CrimsonSemiBold", "Times New Roman", Georgia, serif; 
    width: 829px; 
    height: 163px; 
    margin: 0 auto; 
    padding: 6px 0; 
} 

.hide { 
    display: none; 
} 

.hidden h1 { 

    font-weight: 500; 
    font-size: 40px; 
    line-height: 1em; 
    margin: 10px 0 20px 0; 
    letter-spacing: -2px; 
    color: #232323; 
    clear: both; 
} 
.hidden h5 { 

    font-weight: 500; 
    font-size: 16px; 
    line-height: 1.5em; 
    margin: 10px 0; 
    color: #222; 
} 
.hidden a { 
    text-decoration: underline; 
} 

.hidden arrow { 

    position: absolute; 
    top: 300px; 
    left: 815px; 
    clear: both; 
    z-index: 1; 
} 
/* Boxes */ 

.basecamp { 
    clear:both; 
    text-align: center; 
    height: 288px; 
    padding-bottom: 30px; 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode' Verdana, sans-serif; 
    z-index: 0; 
} 

.basecamp h3 { 
    text-decoration: underline; 
    font-size: 21px; 
    font-weight: bold; 
    line-height: 1.5em; 
    margin: 0 0 10px 0; 
} 


.basecamp h4 { 
    color: #CC0000; 
    margin: 5px 0 10px; 
    font-size: 14px; 
} 

.basecamp p { 
    margin: 5px 0; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    font-size: 14px; 
    color: #222; 
    line-height: 1.4em; 
} 

.basecamp a { 
    position: relative; 
    top: 40px; 
    left: 75px; 
    width: 160px; 
    margin: 15px 20px 5px; 
    float: left; 
    border: 1px solid #E8E8E8; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-box-shadow: 0 0 5px #EFEFEF; 
    -moz-box-shadow: 0 0 5px #efefef; 
    box-shadow:0 0 5px #EFEFEF; 
    padding: 20px 10px 10px; 
    text-decoration: none; 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; 
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(#EFEFEF)); 
    background: -moz-linear-gradient(top, white, #EFEFEF); 
    clear: none; 
}

JQuery的：

$(document).ready(function() { 
    /*console.log("hello")*/ 
    $('.basecamp a').hover(function() { 

     $(".header").addClass('hidden'); 
     $("#basecamp").removeClass("hidden"); 
    }, 

    function() { 

    }); 
});

來源

2013-08-28 HelloWorld

我沒有經歷過整個代碼走後，但是從搗鼓，我的問題，將鼠標懸停你正在做addClass與removeClass在同一個div上，這樣做的重點是什麼 –

我一直在問自己同樣的問題。這是我可以讓新文本出現的唯一途徑。如果我做了類似的事情。removeClass（「標題」）在底部留下所有的框，但所有文本都消失。沒有顯示。我現在擁有的方式是我能夠讓我的新文本出現的唯一途徑。 – HelloWorld

添加隱藏類和刪除標題對我來說很有意義。我只是沒有那樣得到理想的結果。 – HelloWorld

我不確定你到底想要達到什麼目的，但是我認爲你在類中混淆了幾個ID，這就是爲什麼你無法完成這項工作。

我對你的代碼做了一些修改，我認爲它現在正在工作（如果這是你想實現的）你需要編輯一下你的css以便「Basecamp」更好地適應當你懸停在底部的盒子上。

入住這EXAMPLE

Hope this helps

來源

2013-08-28 04:36:50 Thanos

試試這個：

$('.basecamp a').hover(function() { 
     $(".header").hide(); 
     $("#basecamp").show(); 
    },

來源

2013-08-28 04:26:15 jDesign

其實你給風格隱藏要素。你怎麼能看到他們然後..你刪除了.basecamp隱藏類，所以不會有任何.hidden h1和h5樣式。得到它了？

或者你可以給在CSS另一個類，並添加類.basecamp您刪除隱藏類

來源

2013-08-28 04:45:25

使用懸停和添加/刪除類問題

回答

相關問題