在 jQuery 中修改 CSS 类

Question

I have this CSS class:

    .tooltip:hover > b {
        opacity: 1;
        visibility: visible;
        display: inline;
        margin-top:30px;
    }

Now, I need to change the display to none using jQuery. I tried

     $('.tooltip').find('b').css('display', 'none');

and

     $('.tooltip').hover(function(){
        $(this).css('display', 'none');
     });

but niether are changing the display to none. How can I achieve this?

Answer 1

$('.tooltip').hover(function(){
        $(this).find('b').css('display', 'none');
     });

Answer 2

Try this

$('.tooltip b').hover(function(){
        $(this).hide();
     });

Answer 3

You don't need to mess with display , nor do you need to do two-steps selection: one selector is enough.

Simply do:

$('.tooltip b').hide();

Answer 4

Here the reason: .css('display', 'none');

use .css({'display' : 'none'}); make sure it is colon ":" but not a comma "," and they are inside curly braces.