Real newbie here with what may be a really stupid question, but please bear with me, as there is something fundamental (almost philosophical...) I don't get; I'm not even sure I'm asking the question correctly:
Say I need a message to pop up: usually there's a button the user needs to click on to open the message box; in the message box itself there's usually a big "X" or "Cancel" area, which needs to be clicked on to return to the main page.
The appearance of the "open message" button is determined by something like this:
.button {
font-size: 1em;
cursor: pointer;
....
}
etc.
The appearance of the button when hovered over by the mouse, is determined by something like this:
.button:hover {
background: blue;
....
}
The appearance of the overlay is determined by something like this:
.overlay {
visibility: hidden;
opacity: 0;
.....
}
And finally, the message box itself is something like this:
.popup {
margin: 20px auto;
....
}
What I don't understand is what causes the whole thing to open up on a click event; I can see the ".button:hover" but not a ".button:click", or anything like that. And, obviously, I have the same question about closing the message box and the overlay.
So there must be something basic about CSS philosophy that I don't get - any help would really be appreciated. And, again, apologizes if I'm not doing this correctly.
Hi DeepWater, Usually it
Hi DeepWater,
Usually it would be JavaScript that listens to the click event and opens or closes the popup.
You can sort off get a similar effect with CSS but really should be done with JavaScript.