CODEWITHSUNDEEP
jquerycss
Amy
Amy

Reputation: 1914

How to change CSS property with jQuery?

This may seem like a simple question, but what I am trying to do is this:

I have a CSS which looks like this:

.menu-item:hover ul { height: 50px; }

And items like tis:

<div class="menu-item">
    <h4><a href="#">About</a></h4>
    <ul>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

When the h4 item is hovered, I'd like to set that CSS property to some value, let's say 300px. When the mouse leaves, I'd like to reset it back to 50px.

Upvotes: 0

Views: 66

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

With jQuery you could just simplfy it and do something like below..

$( "h1" ).hover(function() {
  $( this ).toggleClass( "increase", 1500, "easeOutSine" );
});
h1 {
  background-color: green;
  text-align: center;
}
.increase {
  color: red;
  height: 150px;
  color: white;
  line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> change on hover </h1>

Note: I added some proprerties just to make the increase in height visible. I also prefer .ddClass because .CSS adds inline CSS to you document.

Upvotes: 0

tabz100
tabz100

Reputation: 1473

You can use straight CSS:

.menu-item h4:hover  { height: 300px; }
.menu-item h4 { height: 50px; }

if you want to use jQuery you can do:

  $(".menu-item h4").hover(  function(){
   //Mouse Enter
      $(this).css({
        "height": "300px"
      });
   },
   //Mouse Leave
   function(){
      $(this).css({
        "height": "50px"
      });
   } 
}

Upvotes: 2

gewh
gewh

Reputation: 395

h4:hover { height:300px; }

Pseudo elements in CSS, no Javascript required.

Upvotes: 3

Related Questions