jquery - how to change the display css attribute of a button within a li on hover

Tags: javascript,jquery,css

Problem :

I have a <li> that onhover, should change the css 'display' attribute of a button within that <li>. The idea is that hovering over that <li> should make a button appear.

Right now my HTML is:

<li class="select-bldg-listing">
     <button class="select-bldg-btn">Review</button>
</li>

my CSS:

.select-bldg-btn {
display: none;
 }

jQuery:

$('.select-bldg-listing').hover(function () {
    $('.select-bldg-btn').css('display', 'inline-block');
},
function(){
    $('.select-bldg-btn').css('display', 'none');
});

But nothing happens when I mouseover on the page. What am I doing wrong?

---

Solution :

You can do this without JavaScript:

.select-bldg-btn {
    display: none;
}

.select-bldg-listing:hover .select-bldg-btn {
    display: inline-block;
}