How to change CSS property with jQuery?

Question

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.

When the h4 is hovered you want the ul to change height? — apaul
– apaul, Commented Jan 19, 2015 at 17:47

gewh · Accepted Answer · 2015-01-19 17:38:19Z

3

h4:hover { height:300px; }

Pseudo elements in CSS, no Javascript required.

answered Jan 19, 2015 at 17:38

gewh

3951 silver badge7 bronze badges

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

Comments

tabz100 · Accepted Answer · 2015-01-19 17:42:38Z

2

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"
      });
   } 
}

edited Jan 19, 2015 at 17:42

answered Jan 19, 2015 at 17:37

tabz100

1,47311 silver badges14 bronze badges

2 Comments

Amy Over a year ago

That would be fine. However, I have multiple divs with the "menu-item" class. And the reason I want to do it with JS is that the height should depend on the number of items...

tabz100 Over a year ago

If you use the jQuery version then you only target the current h4 that you are hovering on

Sleek Geek · Accepted Answer · 2015-01-26 16:17:07Z

0

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.

edited Jan 26, 2015 at 16:17

answered Jan 19, 2015 at 17:54

Sleek Geek

4,7063 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to change CSS property with jQuery?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related