Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3115
  • Last Modified:

Unable to use CSS hover attribute on asp.net imagebutton

I want to use CSS to create a border around my asp.net image buttons when the mouse is hovering on them or when they have focus.  I can make this work with normal images but not the imagebuttons.

When I run the code below and put my mouse over the normal image it works but it does not when I put it over the imagebutton.  Also, how can I get a similar effect when the imagebutton has focus?

The CSS:
.CCSImageButton
{
    border:1px solid transparent;
}
.CCSImageButton:hover
{      
    border:1px solid #021a40;
}

Open in new window


The HTML:
   
 <p>
 <img alt="" class="CCSImageButton" src="images/FWEditDetails.png" />
 </p>
 <p>
 <asp:ImageButton ID="ImageButtonEdit" runat="server" Enabled="True" 
 ImageUrl="~/images/FWEditDetails.png" onclick="ImageButtonEdit_Click" 
 EnableTheming="False" CssClass="CCSImageButton" />
</p>

Open in new window

0
canuckconsulting
Asked:
canuckconsulting
  • 4
  • 2
1 Solution
 
Barry62Commented:
Don't use hover.  Use onmouseover and onmouseout.

<asp:ImageButton ID="ImageButtonEdit" runat="server" Enabled="True" 
 ImageUrl="~/images/FWEditDetails.png" onclick="ImageButtonEdit_Click" 
 EnableTheming="False" CssClass="CCSImageButton" onmouseover="this.style.border='border:1px solid #021a40;'" onmouseout="border:1px solid transparent;'" /> 

Open in new window

0
 
canuckconsultingAuthor Commented:
I would rather do it via css; I'm trying to clean up my code and keep styling out of it.  

That said if it is the only thing that works so be it.  Do you know if these events are supported cross-browser types?

Thanks for help.
0
 
Barry62Commented:
The reason I said not to use CSS hover is because .net renders an imageButton as an image with a border of 0px.  This will automatically override any CSS.  You have to use javascript events.

Javascript events are cross-browser.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
informaniacCommented:
Does this work?

.CCSImageButton:hover
{      
    border-width:1px !important;
    border-style: solid !important;
    border-color: #021a40 !important;
} 

Open in new window

0
 
Barry62Commented:
No, it won't work.  Actually, the code I showed you earlier won't work either.  onmouseover and onmouseout are not defined attribute of imagebutton.  You will have to add them dynamically in the code behind.

ImageButtonEdit.Attributes.Add("OnMouseOver","this.style.border='border:1px solid #021a40;"
ImageButtonEdit.Attributes.Add("OnMouseOut","this.style.border='border:1px solid transparent;"

Open in new window

0
 
canuckconsultingAuthor Commented:
Thank you!
0
 
Barry62Commented:
Thanks!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now