Css 专注初学者

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:hover { 可见性：隐藏！重要； }

但它不起作用。

Answer 1

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

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

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

并有这样的 css 规则：

.hide { display: none; }