Question

我是CSS的初学者并且已经讨厌它:(。当用户点击日历之外时，我希望日历消失。

以下是日历的html代码：

<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">

我试过了：

.RadCalendar_Default .rsHeader a.rsDatePickerCalendar：悬停 { 能见度：隐藏！重要; }

但它不起作用。

Answer 1

首先，我建议使用visibility: hidden;来隐藏元素，而不是display: none;。否则，您可能会产生不良副作用。

然后，:hover伪类不处理click事件，它只是活动的，如果用户（顾名思义）用光标悬停元素。要在单击时更改元素的外观，请使用如下所示的jQuery：

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

并且有这样的css规则：

.hide { display: none; }

Css焦点初学者

1 个答案: