How to change LinkButton forecolor in mouse over event

[moondaddy]

in asp.net 2.0, i have a link buttonand want to change the forecolor in a
mouse over event. how can I do this?

 

[Nathan Sokalski]

To do this you would use JavaScript to change the color using CSS.

 

[bruce barker]

use css:

<style>
a:hover {color:red}
</style>


-- bruce (sqlwork.com)

 

[moondaddy]

OK Thanks.

I tried this but the style doesnt seem to effect it:

<style>


..clsHomePgLinkBtnNormal {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }

..clsHomePgLinkBtnMouseOver {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }

</style>



<asp:LinkButton ID="LinkButton1" runat="server"

onmouseover="LinkBtnMouseOver(this)"

onmouseout="LinkBtnMouseOut(this)"

LinkButton</asp:LinkButton>

I put a debugger in here and the code executes with no error, but doesnt
have any effect on the link button's forecolor.

any suggestions?

To do this you would use JavaScript to change the color using CSS.

 

[Cowboy \(Gregory A. Beamer\)]

Best way is to emit javascript after querying the control for its post back
event. I do not have a sample, but a google search should reveal something.
You can fudge the JavaScript with the control name in source, but you will
blow up if you change the location of the control (like move to a control in
the page). If you query the control, it will always give you the current
control name, regardless of position.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com

*********************************************
Think outside the box!
*********************************************

 

[moondaddy]

Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"

Home</asp:LinkButton>

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.

Best way is to emit javascript after querying the control for its post
back event. I do not have a sample, but a google search should reveal
something. You can fudge the JavaScript with the control name in source,
but you will blow up if you change the location of the control (like move
to a control in the page). If you query the control, it will always give
you the current control name, regardless of position.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com

*********************************************
Think outside the box!
*********************************************

 

[moondaddy]

OK I got it:

I need to change the element's style in javascript like this:


function LinkBtnMouseOver(e)
{
e.style.color="aqua";
}
function LinkBtnMouseOut(e)
{
e.style.color="white";
}

Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"

Home</asp:LinkButton>

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.

 

[Nathan Sokalski]

The problem is you are not setting the right properties (you are trying to
set properties of a server control, but you should be setting properties of
the generated HTML element). try the following:

function LinkBtnMouseOver(e)
{
e.className='clsHomePgLinkBtnMouseOver';
e.style.color='Aqua';
}

You may also find the following site useful:

http://codepunk.hardwar.org.uk/css2js.htm

Good Luck!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

Thanks.

I think I know what the problem is, but I don't know the solution. the
mouseover event is calling a function which sets the css class. but the
color property has no effect on the button. If I change the font size in
the css class I can see this take effect in the mouseover event. I also
tried setting the forecolor via jscript with no luck.

<asp:LinkButton ID="LinkButton1" runat="server"
onmouseover="LinkBtnMouseOver(this)"
onmouseout="LinkBtnMouseOut(this)"

Home</asp:LinkButton>

I debugged it and this passes in a correct reference to the link button.
the function calls the css class like this:


<script language="JavaScript" fptype="dynamicanimation">
function LinkBtnMouseOver(e)
{
debugger;
e.className='clsHomePgLinkBtnMouseOver';
e.ForeColor="Aqua"
}
function LinkBtnMouseOut(e)
{
e.className='clsHomePgLinkBtnNormal';
e.ForeColor="White"
}

//-->
</script>

and here's the style in the page:


<style>
.clsHomePgLinkBtnNormal {font-size: 11pt; color: white; font-family:
'Microsoft Sans Serif'; }
.clsHomePgLinkBtnMouseOver {font-size: 11pt; color: aqua; font-family:
'Microsoft Sans Serif'; }
</style>

seems like it should work but the for color does not change.

 

[michaelmeyer99]

Use Javascript code to change the color. call on mouseover and mouseout event
See the below link where already code is published.

http://www.hyperneed.com/ShowSearchAnswers.aspx?searchstring=&category=Programming&questionid=44e37b4c-49f1-4ef0-be7a-e00d852304ce