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

    CSS Howto..

    how to highlight specific control with css [duplicate]

    how to DRY up (remove redundancy) from this css class selector declaration?

    on hover and on click how to fade out image and fade in content text

    How can I create a color with values for green, blue, orange, and gold only?

    How can I print a full gridview area via a custom print window?

    CSS slideshow - How can I add a link to the image?

    How to add new property within existing css?

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to add CSS Hack specifically for IE10?

    How to apply CSS style for the current page link

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to change the images using HTML and CSS? [closed]

    How to avoid margin form ul in li tag?

    How to create a master page using HTML? [closed]

    in css, how to responsively stick element to certain background image part?

    How to position divs inline with same spacing

    How to fix clipped text over 3D transform image on Safari?

    How to set an html element's height as { 100% - 10em from bottom }

    How to make padding look the same in moz and webkit browsers?

    CSS - How to align image left bottom to the text block?

    how to achieve facebook mobile site buttons menu scroll effect?

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    How to make a navigation bar have equal spacing?

    How do you select a radio button in css?

    How to add styles to wordpress default menu

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to adjust the top of an image and an input in the same line?

    How to change or disable the alternating background colors in Google Prettify

    How to use CSS in XML and XSL

    HTML DIV Overflowing, How To Stop?