在ASP.NET中，Calendar控件是一個非常常用的組件，用于顯示日歷。然而，一個常見的問題是，當鼠標指向Calendar控件的某個日期時，無法實現懸浮效果，即無法顯示有關該日期的詳細信息。通過使用JavaScript和CSS，可以很容易地實現這一功能。本文將介紹如何通過增加懸浮效果，使得ASP Calendar更加交互和用戶友好。 首先，我們需要添加一個包含詳細信息的html元素。我們可以在每個日期方框內添加一個div元素，并設置其樣式為隱藏。當用戶將鼠標指向某個日期時，我們將顯示這個div元素以顯示相關信息。具體代碼如下所示： ```asp``` 然后，我們需要處理Calendar的DayRender事件，以便在渲染每個日期時添加懸浮效果。在DayRender事件中，我們將設置日期方框的onmouseover和onmouseout事件，以調用JavaScript函數來顯示和隱藏相關信息。具體代碼如下所示： ```csharp protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { if (e.Day.IsOtherMonth) return; HtmlGenericControl dateInfo = new HtmlGenericControl("div"); dateInfo.InnerText = "詳細信息：這是" + e.Day.Date.ToShortDateString() + "的詳細信息"; dateInfo.Attributes["class"] = "date-info"; dateInfo.Attributes["id"] = "date-info"; e.Cell.Attributes["onmouseover"] = "showInfo()"; e.Cell.Attributes["onmouseout"] = "hideInfo()"; e.Cell.Controls.Add(dateInfo); } ``` 通過上述代碼，我們已經成功地為每個日期方框添加了一個隱藏的div元素，并設置了鼠標懸浮時的顯示和隱藏事件。現在，我們只需要用CSS來添加懸浮效果，即將相關信息顯示在懸浮窗口上。具體代碼如下所示： ```css .date-info { display: none; position: absolute; top: 0; } td:hover .date-info { display: block; background-color: #fff; border: 1px solid #000; padding: 5px; } ``` 通過上述CSS代碼，我們將懸浮窗口的樣式設置為絕對定位，并將其初始化為隱藏狀態。當鼠標懸浮在日期方框上時，我們通過:hover選擇器將顯示相關信息的div元素設置為顯示狀態，并添加了一些樣式以使其更加美觀和可讀。 通過以上代碼，我們成功地為ASP Calendar添加了懸浮效果，用戶可以通過鼠標懸浮在某個日期上時，顯示該日期的詳細信息。例如，如果用戶將鼠標指向9月1日，懸浮窗口將顯示"詳細信息：這是2022年9月1日的詳細信息"。這為用戶提供了更多的信息，提升了用戶體驗。 總結起來，通過在ASP Calendar中添加懸浮效果，我們可以輕松地提供日期的詳細信息。這種交互性的改進使得用戶在使用Calendar控件時更加方便和友好。無論是用于展示活動日程、預訂、或是其他日期相關的功能，這種懸浮效果都能夠為用戶提供更多的信息和便利。