Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Why does it display after it is click when "display: none" is still on the css?

Not very sure. Thanks!

2 Answers

11,729 Points

CSS values would be replaced by JavaScript (jQuery) if you specifically state it. jQuery library is all about element manipulation.

The .show() method effectively change the overlay selector in the document, from its initial value that was declared in CSS from "none" to "block", hence, it will show after the click event.

Hugo Paz
Hugo Paz
15,620 Points

Hi Qin,

I assume you mean the .show() method. According to the jquery api documentation:

"The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block"), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css( "display", "block !important") should you wish for .show() to function correctly."

You can read more about it here