locked
Linking CSS with an ASP item RRS feed

  • Question

  • User415770868 posted

    I want to link an ASP item with my stylesheat.

    But the Stylesheat doesn't register asp items.

    for example: 

    <asp:ImageButton Width="5%" Height="5%" hover="fill:White;" runat="server" id="ShoppingCart" ImageAlign="Right" ImageUrl="~/foto's/shopping-cart-solid.svg"></asp:ImageButton>

    So I try to link it like this:

    #ShoppingCart:hover{
    fill:White;
    }

    But is doesn't recognise it

    Thursday, November 15, 2018 1:35 PM

All replies

  • User-821857111 posted

    Use the CssClass property instead of the ID:

    <asp:ImageButton Width="5%" Height="5%" runat="server" CssClass="ShoppingCart" id="ShoppingCart" ImageAlign="Right" ImageUrl="~/foto's/shopping-cart-solid.svg"></asp:ImageButton>
    .ShoppingCart:hover{
    fill:White;
    }

    Or set the ClientIDMode to Static:

    <asp:ImageButton Width="5%" Height="5%" runat="server" ClientIDMode="Static" id="ShoppingCart" ImageAlign="Right" ImageUrl="~/foto's/shopping-cart-solid.svg"></asp:ImageButton>

    Thursday, November 15, 2018 3:40 PM
  • User-893317190 posted

    Hi retlok

    As Mikesdotnetting has shown, the problem is with the id property of your control.

    It doesn't always equal to the real html control sent to client side.

    For example , when your control is in a asp:Content control(means your page has a master page) or in a gridview. They all could be called container control which will change the id property of  child control in it.

    If you open F12 developer tool , you will see your control's id property is different from the id which you write in your aspx.

    For example , I put my control in a child page.

    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    
        <asp:ImageButton Width="5%" Height="5%" hover="fill:White;" runat="server" id="ShoppingCart" ImageAlign="Right" ImageUrl="~/images/WingtipToys/busgreen.png" />
          
    </asp:Content>

    If I open F12,I will see 

    <input type="image" name="ctl00$ContentPlaceHolder2$ShoppingCart" id="ContentPlaceHolder2_ShoppingCart" hover="fill:White;" src="../images/WingtipToys/busgreen.png" align="right" style="height:5%;width:5%;">

    This why you could register your control.

    You could also use css  attribute attribute as follows.It could  controls whose id includes ShoppingCart

      [id*=ShoppingCart]:hover{
    fill:White;
     
    }

    Best regards,

    Ackerly Xu

    Friday, November 16, 2018 3:03 AM