Apologies for the complicated title.
Here is the structure of my DataList:
<asp:DataList ID="DataListFloor" runat="server" RepeatColumns="5" >
<ItemTemplate>
<div style='width:199px;height:166px;background-color: <%# Eval("background") %>'>
<div style="width: 199px; height: 22px; overflow: hidden;">
<div style="box-sizing: border-box; width:97px; float:left;">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Name")%>'></asp:Label>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
The datatable used to bind to this DataList is as follows:
Name background background_mouseOver
----------------------------------------
Joe Yellow Orange
Mary white Beige
Jane Red Maroon
Carl gray Darkgray
The background-color of the div element is set to the value in the column background. The Eval function for this attribute is functioning correctly.
My query is: how can I modify the background-color of the div on MouseOver to match the value in the datatable column background_mouseOver? For instance, when hovering over an item displaying Joe, the background-color should change from Yellow to Orange.
Kindly refrain from using jquery for the solution.
Many thanks.