Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Qin Liao
Qin Liao
3,890 Points

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

Not very sure. Thanks!

2 Answers

akc
akc
11,729 Points
akc
akc
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,622 Points
Hugo Paz
Hugo Paz
15,622 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