the Hover on button is not working in asp.net c#. Please read the description below

Question

I hope someone can help me, i'm stuck. What I want to do is that I have a set of button. All I want is that when I hover on Button SPA, the buttons Pro1, Proii and Proiii changes color. I know since the div are nested maybe that is why the code is not working or you can provide me with some alternate Solution.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<link href="Scripts\table.css" rel="stylesheet" type="text/css" />--%>
    <link/ rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
   <style>
    .custom_button {
        background-color: black;
        color: white;
        padding: 10px 10px;
        border: 1px solid black;
        text-decoration: none;
    }
    
     #btnSpa:hover ~ #btnPro1,
         #btnSpa:hover ~ #btnProii,
     #btnSpa:hover ~ #btnProiii {
        background-color: white;
        color: black;
        padding: 10px 10px;
        border: 1px solid black;
        text-decoration: none;
    }





.container {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.superleft {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 10%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.left {
  margin: 0;
  position: absolute;
  top: 25%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.leftt {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.leftdown {
  margin: 0;
  position: absolute;
  top: 75%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middletop {
  margin: 0;
  position: absolute;
  top: 25%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middledown {
  margin: 0;
  position: absolute;
  top: 75%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

   </style>
  </head>



<body>


    <form id="form1" runat="server">
     
        <div class="container">

           <div class="superleft">
               <asp:Button ID="btnSpa" runat="server" class="custom_button" Text="SPA"/>
           </div> 
           
            <div class="left">
                <asp:Button ID="btnPro1" runat="server" class="custom_button" Text="Pro1" />
            </div>

            <div class="leftt">
            <asp:Button ID="btnProii" runat="server" class="custom_button" Text="Proii"/>
            </div>

            <div class="leftdown">
            <asp:Button ID="btnProiii" runat="server" class="custom_button" Text="Proiii"/> 
            </div>

            <div class="middletop">
            <asp:Button ID="btnPro2" runat="server" class="custom_button" Text="Pro2" />
            </div>

             <div class="middle">
             <asp:Button ID="btnPro2i" runat="server" class="custom_button" Text="Pro2i" />
             </div>

            <div class="middledown">
            <asp:Button ID="btnPro2ii" runat="server" class="custom_button" Text="Pro2ii" />
            </div>

            </div>

       
    </form>
</body>
</html>

score 0 · Answer 1 · answered Dec 09 '20 at 12:39

0

When the asp.net renders the controls he changes the ID that you see on field ID="btnPro12" because this is the asp.net control to id to access it from code behind

To get the rendered on page control id you have to use this code <%=btnPro12.ClientID%> on each point that you have to use the client rendered id.

so change that on your code to make it work. One other way to debug this is to see the source code of the rendered page - there you can check if every id is correct used.

related : Accessing control client name and not ID in ASP.NET

answered Dec 09 '20 at 12:39

Aristos

66,005
16
114
150

Normally it does not changes the ID until you use Master Page or User Control etc. In question it does not seems like that. Form Tag is there in the HTML. – शेखर Dec 09 '20 at 13:27
Actually i was the one who changes the ID to btnpro12 to test and forgot to correct it. It is btnSPA to be precise. – Hash Dec 09 '20 at 13:59
@Hash there is also one more issue here -> ` – Aristos Dec 10 '20 at 03:36
Yes, in my code its cleared. Do you have any idea how i might got this to work? its just a simple hover but i think because of the div its not triggering. – Hash Dec 10 '20 at 07:07
@Hash Its too difficult with out have the real page to debug it - open the browser tools to search by your self whats is going wrong - what I have as idea that maybe now work I write it – Aristos Dec 10 '20 at 07:19
actually, its the whole code. You can just copy it and run. but let us try your idea. i just need it to work – Hash Dec 10 '20 at 07:22

the Hover on button is not working in asp.net c#. Please read the description below

1 Answers1