I add a Button in my webpage http://www.hothelpdesk.com, I hope the underline of text of the Button display when mouse move to the button, how can I do? thanks!

Note: the following code don't work!

<asp:Button runat="server"
  BorderColor="#ACA899" BorderStyle="Solid" BorderWidth="1px"
  CssClass="ForButtonInTable"
  SkinID="ButtonInTable">
</asp:Button>


.ForButtonInTable
{
    text-decoration: none;
}


.ForButtonInTable a:hover
{
    color: #666666;
    text-decoration: underline;
}


And more,when I hover mouse above a normal button, the backcolor of the button will change, but after I set BorderStyle and BorderWidth properties for the button, the backcolor of the button will not change again when I hover mouse above the button, why?




http://www.hothelpdesk.com/ - Web Based Helpdesk, Customer Service, Customer Support Software

__________________
Online Calculator - Online platform to create program with C# 4.0 and share with other people

Hii mycwcgr!!

you can do the thing in many ways
1>use javascript function and change class name.
2>or directly assign class name with mouseover and mouseout
Both the things are shown in the given example
3>you can add Attributes with style in ur C#,VB.net code file too

hope this will help you
<style type="text/css">
<!--
.mover{color:black;text-decoration:underline}
.mout{color:black;text-decoration:none}
-->
</style>
<input type=button id=btn value="test Button" onmouseover="this.className='mover'" onmouseout="chk('mout',this)">
<script>
function chk(cssClassName,obj)
{
obj.className=cssClassName

}
</script>

Cheers :)

vinod

Thanks!
But I hope to do that on standard Button of ASP.NET server control!

I hope to set it as control Skin, so I can use the SkinId in any button.

I have many buttons to be setup, so I don't like to add Attributes with style to button one by one (BTW, could you give me a sample about adding Attributes with style).



http://www.hothelpdesk.com/ - Web Based Helpdesk, Customer Service, Customer Support Software

BTW, the following CSS don't work, could you write a css for me ,thanks!

<asp:Button runat="server"
  BorderColor="#ACA899" BorderStyle="Solid" BorderWidth="1px"
  CssClass="ForButtonInTable"
  SkinID="ButtonInTable">
</asp:Button>

.ForButtonInTable
{
    text-decoration: none;
}

.ForButtonInTable mouseover
{
    color: #666666;
    text-decoration: underline;
}


http://www.hothelpdesk.com/ - Web Based Helpdesk, Customer Service, Customer Support Software

This style selector is saying "apply this style to the element named 'mouseover' when it lives as a child of an element with the class 'ForButtonInTable' ".

I think you are missing the point that "hover" style changes are only natively supported by the A element pseudo class "A:hover". Regular buttons and such require something additional as other posters have pointed out. You can certainly define *how* you want the button to look using CSS, but ultimately you need to employ some script to change the CSS class to affect the change.

One way I have solved this type of problem when the a control's skin attributes aren't enough is by putting some code in my base page class that all pages inherit from (or similarly in a master page class) that performs a recursive search thru the page's control hierarchy to find the controls I wish to act upon. This way you could add the client-side javascript calls to the appropriate attributes of the control such as the "onMouseOver" call to the JS that appends/changes the control's class attribute.

Another way to solve this problem would be to use asp:linkbutton controls instead of buttons. Then you just have to style them to *look* like buttons, but they'll get the native hover support.

You said:
I suspect this is because the OS/browser you are using is doing this behavior. I have noticed this in Opera. As soon as you assign explicit styles to buttons the browser and OS respect those styles and don't change the button. Otherwise you get the default button appearance dictated by the environment you are in.

-Peter

Thanks!

The following code can work under IE 7.0, but don't work in IE 6.0, why?

It mean I can use Skin and CSS to display underline for a regular button when mouse hover it, right?


 <asp:Button runat="server"
   BackColor="#ECE9D8"
   BorderColor="#7F9DB9" BorderStyle="Solid" BorderWidth="1px"
   CssClass="ForButtonInTable"
   SkinID="ButtonInTable">
 </asp:Button>

.ForButtonInTable
{
    text-decoration: none;
    color: black;
}


.ForButtonInTable:hover
{
    text-decoration: underline;
    color: blue;
}



http://www.hothelpdesk.com/ - Web Based Helpdesk, Customer Service, Customer Support Software

I would imagine it works because I.E. 7 has support for the :hover pseudo class on more than just the A element.

-Peter