将 onmouseout 更改为另一个元素的颜色

Question

我在 C# 网络应用程序中有一个 asp:Calendar：

<asp:Calendar ID="cal_ReserveDate" runat="server"
                            DayStyle-ForeColor="DarkBlue" DayHeaderStyle-BackColor="#FEF6CB" DayStyle-Height="25" DayStyle-Font-Bold="true"
                            SelectedDayStyle-BackColor="#003F7D" SelectedDayStyle-ForeColor="White"
                            DayNameFormat="FirstLetter" ShowGridLines="true" BorderColor="Black"
                            TitleStyle-BackColor="#003F7D" TitleStyle-ForeColor="White" TitleStyle-CssClass="CalHeader"
                            NextPrevStyle-CssClass="CalNextPrev" NextPrevStyle-ForeColor="White"
                            OnVisibleMonthChanged="cal_ReserveDate_VisibleMonthChanged"
                            OnDayRender="cal_ReserveDate_DayRender" OnSelectionChanged="cal_ReserveDate_SelectionChanged"
                            DayStyle-BorderColor="Black" SelectedDayStyle-CssClass="CalendarSelectedDay" Width="97%" Font-Bold="true" />

我正在使用 OnDayRender 调整关闭、售罄等日期的颜色。我今天想制作一种颜色，我们的设计团队可以从样式 sheet 中设置。我将此添加到初学者的样式中，但它可能会增长：

.calendarToday {
    background-color: mistyrose;   
}

在我渲染时的代码中 "today" 我有这个：

if (e.Day.IsToday)
{                
    string onmouseoutStyle = "this.style.backgroundColor='@BackColor'";    
    e.Cell.CssClass = "calendarToday";   
    e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", <<read current bgColor>>));
}

这类似于我在售罄日的代码，例如，在鼠标移出时重置背景，但它是所有固定的预定义颜色，硬编码到应用程序的其他地方。

我想做的是将 onmouseout 设置为 calendarToday 样式中定义的任何背景颜色，但我不知道如何访问 e.Cell 属性例如 background-color 阅读设计师在样式中将其设置为什么颜色sheet。

感谢任何帮助！感谢阅读 - 吉姆

Answer 1

我想我现在明白了。如果您希望 background-color 恢复为 CSS 中指定的内容，您可以将其设置为空字符串，例如 this.style.backgroundColor = ''。这将删除单元格上的内联样式背景色。

演示

var cells = document.querySelectorAll('td');

for (var i = 0, l = cells.length; i < l; i++) {
  cells[i].addEventListener('mouseenter', function() { this.style.backgroundColor = 'goldenrod'; });
  cells[i].addEventListener('mouseout', function() { this.style.backgroundColor = ''; });
}

.calendar {
  border-collapse: collapse;
}

.calendar td {
  padding: 10px;
  border: solid 2px black;
}

.calendarToday {
    background-color: mistyrose;   
}

<table class="calendar">
  <tbody>
    <tr>
      <td>Sunday</td>
      <td>Monday</td>
      <td>Tuesday</td>
      <td>Wednesday</td>
      <td class="calendarToday">Thursday</td>
      <td>Friday</td>
      <td>Saturday</td>
    </tr>
  </tbody>
</table>

将 onmouseout 更改为另一个元素的颜色

Change onmouseout to the color of another element

css

c#

asp.net

calendar