Using Hover and Add/Remove Class problems

Question

I am new to JQuery and am having some troubles with an exercise I have been working on. I am using a Hover function to change text. The problem is the text is changing but the text is not inheriting the class properties I want it to.

Here is a jsfiddle to my problem: http://jsfiddle.net/byMUy/

The #basecamp should be receiving the "hidden" class property(or all of them for every element selector). When I hover (on the first box bottom left). The text changes but it does not inherit the class I want it to (hidden). When I inspect source after I hover, I see that the class changes to hidden. I'm trying to figure out how to make sure that my "hidden h1, hidden h5, etc" is inherited, I think this may be the problem.

My main question is: After I hover(over the lower left box) why doesn't my new text inherit my hidden properties in my CSS? It should look very similar to how it looks before the hover, the header text just changes.

Here is my source code:

Thanks!

**I realize my "function" in my Jquery is finished as my hover out is not yet filled out. I am mainly focusing on getting the first part right.

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 () {

    });
});

i have not gone through the whole code, but from fiddle, i problem, Hover you are doing addClass and removeClass on the same div, what is the point in doing like this — RONE
– RONE, Commented Aug 28, 2013 at 4:16
I've been asking myself the same question. It's the only way I can get the new text to appear. If I do something like .removeClass("header") all my boxes at the bottom stay, but all the text disappears. Nothing shows. The way I have it now is the only way I've been able to get my new text to appear. — HelloWorld
– HelloWorld, Commented Aug 28, 2013 at 4:19
It makes sense to me to add the class hidden and remove header. I just don't get the desired results that way. — HelloWorld
– HelloWorld, Commented Aug 28, 2013 at 4:20
basecamp a is at the very bottom of my css. It is also in my HTML, the section class = basecamp. All the sections are wrapped in a link. I did that so whenever your cursor enters any of the boxes, it changes to the finger link icon. This is what you are supposed to hover over to trigger the jquery event. — HelloWorld
– HelloWorld, Commented Aug 28, 2013 at 4:24

Thanos · Accepted Answer · 2013-08-28 04:36:50Z

1

I am not sure what exactly you want to achieve, but i think you confused a couple of IDs with classes and that's why you couldn't make this work.

I made a couple of changes on your code and i think it is working now (if this is what you want to achieve) You will need to edit a bit your css in order for the "Basecamp" to fit better when you hover over the bottom boxes.

Check this EXAMPLE

Hope this helps

answered Aug 28, 2013 at 4:36

Thanos

3,0592 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jDesign · Accepted Answer · 2013-08-28 04:26:15Z

0

Try this:

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

answered Aug 28, 2013 at 4:26

jDesign

286 bronze badges

Comments

Manu M · Accepted Answer · 2013-08-28 04:45:25Z

0

actually you are giving style to the hidden elements. How can you see them then.. You removed class hidden from .basecamp and so there wont be any .hidden h1 and h5 styles. Got it?

Or you can give another class in css and add that class to .basecamp after you removed hidden class

answered Aug 28, 2013 at 4:45

Manu M

1,0645 silver badges18 bronze badges

Collectives™ on Stack Overflow

Using Hover and Add/Remove Class problems

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related