asked on

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

Barry62

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

canuckconsulting

ASKER

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.

Barry62

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.

Obadiah Christopher

Does this work?

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

Open in new window

ASKER CERTIFIED SOLUTION

Barry62

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

canuckconsulting

ASKER

Thank you!

Barry62

Thanks!