Question

I’m a beginner in CSS and already hate it :(. When the user will click outside of the calendar, I want the calendar to disappear.

Here is the html code for the calendar:

<div id="ctl00_MainContent_EventsCalendar" class="RadScheduler RadScheduler_Default" style="overflow-y:visible;">
<div class="rsTopWrap rsOverflowExpand" style="width: 1157px; ">
<div class="rsHeader">
        <div class="rsDatePickerWrapper" style="overflow-x: visible; overflow-y: visible; ">
            <div id="ctl00_MainContent_EventsCalendar_SelectedDateCalendar_wrapper" style="position: absolute; width: 220px; height: 176px; overflow-x: hidden; overflow-y: hidden; ">
                <table id="ctl00_MainContent_EventsCalendar_SelectedDateCalendar" summary="Calendar" cellspacing="0" class="RadCalendar RadCalendar_Default rsDatePickerCalendar">

I tried:

.RadCalendar_Default .rsHeader a.rsDatePickerCalendar:hover
{
visibility:hidden !important;
}

But it’s not working.

Answer 1

First, instead of visibility: hidden;, I recommend to use display: none; to hide elements. Otherwise you may have undesired side-effects.

Then, the :hover pseudo-class doesn’t handle click events, it’s just active, if the user (as the name suggests) is hovering the element with the cursor. To change the appearance of an element on a click, use jQuery like this:

$('body').bind('click', function() {
    $(".RadScheduler", this).addClass("hide");
});

and have a css rule like this:

.hide { display: none; }