CODEWITHSUNDEEP
javascriptjquerycsshtml
user3380708
user3380708

Reputation: 21

How to make divs sink on hover and click

I was working on some HTML and I want to have it so that when you move your mouse over the div, it will sink about 10 px, and when clicked it will sink down completely. I've done this before with divs without any links (<a>) or text (<p>) and it worked perfectly fine. But on my website (www.metatronaut.com) it doesn't sink at all. In my javascript code:

$(document).ready(function() {
   $('tag').mouseenter(function() {
      $(this).animate({
         height: '-=20px'
   });
});
$('tag').mouseleave(function() {
   $(this).animate({
       height: '+=20px'
   }); 
});
$('tag').click(function() {
   $(this).animate({
       height: '-=250px'
   });
  }); 
});

(The divs are 250px)

Here's how my HTML tags are listed.

<td>
    <a href="https://www.twitter.com/metatronstudios">
       <div id="twitter">
          <p>Twitter</p>
       </div>
    </a>
</td>

And the CSS

div {
height:250px;
width:250px;
}
table {
margin:auto;
}
a {
font-size:24px
text-decoration:none;
color:#FFFFFF;
}
#twitter {
background-color:#11CDFB;
}

Any idea what's going wrong? Or what tag I should put in the JS? (I've used a, div, td, and p none of which have worked.)

Thanks!

-Sam

Upvotes: 2

Views: 287

Answers (1)

slynagh
slynagh

Reputation: 601

You need to include jQuery if you're going to use it. It needs to load before any other script that references it. The best place to load your javascript is generally just before your closing </body> tag. This makes for faster page load and ensures the DOM is ready for you to go and manipulate it.

So add this line before </body>:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

You'll also need to move your own script out of the head and put it after jQuery:

<script type="text/javascript" src="script.js"></script>

Upvotes: 2

Related Questions