CODEWITHSUNDEEP
jqueryhtmlcsshoveraddclass
HelloWorld
HelloWorld

Reputation: 11249

Using Hover and Add/Remove Class problems

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

    });
});

Upvotes: 0

Views: 1249

Answers (3)

Manu M
Manu M

Reputation: 1064

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

Upvotes: 0

Thanos
Thanos

Reputation: 3059

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

Upvotes: 1

jDesign
jDesign

Reputation: 28

Try this:

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

Upvotes: 0

Related Questions