Switch the color of an element when onmouseout occurs

Question

Switch the color of an element when onmouseout occurs

I am currently working on a C# web application that includes an 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" />

My goal is to customize specific date colors using the OnDayRender function, such as for closed or sold out dates. I also want to allow our design team to set today's color through the stylesheet. To start, I added this CSS style:

.calendarToday {
    background-color: mistyrose;   
}

In my rendering code for "today," I have the following:

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>>));
}

This logic resembles what I use for marking sold-out days and resetting background colors upon mouse-out, but in other instances, I have fixed predefined colors hardcoded in the app. My challenge now is figuring out how to access the e.Cell attributes, particularly the background-color, to determine the color set by designers in the calendarToday style sheet.

If anyone can provide insight into accessing this information, it would be greatly appreciated! Thank you for your attention - Jim

c#css asp.net calendar

Answer 1

Answer №1

It has become clear to me now. To restore the background-color to its CSS-specified value, you can simply set it to an empty string like so: this.style.backgroundColor = ''. This action will eliminate the inline style background-color on the cell.

Live Demonstration

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>

Answer 2

It has become clear to me now. To restore the background-color to its CSS-specified value, you can simply set it to an empty string like so: this.style.backgroundColor = ''. This action will eliminate the inline style background-color on the cell.

Live Demonstration

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>

Switch the color of an element when onmouseout occurs

Answer №1

Similar questions

Having trouble transferring ASP server control value to a Javascript function

Make sure your website design is responsive by setting the body to the device's

Arrange list items in a circular pattern

Using Bootstrap 4 beta for Form Validation

Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

Using Json.Net to deserialize intricate data structures

What is the reason for the leftward shift of the buttons?

Navigate the conversation within the dialog without affecting the content below

MongoDB encountered a serialization depth error that exceeded the maximum allowed limit

What is the best way to reduce the size of an image using a URL?

Changing the border color of material ui Rating stars: A guide

Forced Landscape Viewing on Mobile Site with No Auto-Rotation

Python: parsing comments in a cascading style sheet document

Is it necessary to utilize Azure Media Services and Player for a solely audio-based application?

How to efficiently traverse an array in C# by making use of multiple iterations

Ever since I switched to using Angular4, my CSS has been acting up and no longer seems to be functioning properly

Display the validation error directly on the field as feedback from the AJAX calls

Using jQuery to alter the colors of a dynamically generated table based on its content

CSS: Deciphering the Hidden Message in this Code Snippet!

Deactivate the option for interactive logins