why mouse over css not work when add style to link button using javascript ?

Question

1.60/5 (2 votes)

See more:

Hai
i have a problem in mover over in link button,i have 5 link buttons one by one,if we 1'st link button is click that link button font color change to blue and other change to black color.if we click 2nd link button ,2nd one change to blue color and 1st and other link button font color change to black color and so on.

By page load all link button font color is black.Below is properties change in html code.

ASP.NET

<asp:LinkButton ID="lnkAddDept" runat="server"  Font-Underline="False" CssClass ="change" OnClientClick="return AddDept_ClientClick()"font-family="Arial"
  font-size=" 12px"
  font-weight" bold"
  color=" black">Add Department </asp:LinkButton>

in change css

CSS

.change:hover
      {
          color: Red;
          text-decoration:underline;
        cursor :pointer ;
      }

and in every link button ClientClick event

JavaScript

document.getElementById("ctl00_ContentPlaceHolder1_lnkAddDept").style.color = "black"
           document.getElementById("ctl00_ContentPlaceHolder1_lnkAddUser").style.color = "black"
           document.getElementById("ctl00_ContentPlaceHolder1_lnkImpADUser").style.color = "black"
           document.getElementById("ctl00_ContentPlaceHolder1_lnkImpUserList").style.color = "black"
           document.getElementById("ctl00_ContentPlaceHolder1_lnkExpUserList").style.color = "#0064a5"

if i using above javascript for change color for link button,after that mouse over css not work,but if i remove javascript then it will work,

But my need is if click any link that one change to blue color others need to change black color and also need to work mouse over css

In simple words what i try to say,if i changed font color for link button and try to use mouser over css,it not work,but i leave default property for link button ,mouse over css work,

Regards
Aravind

Posted 23-Oct-13 20:55pm

Aravindba

Updated 23-Oct-13 21:08pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Answer 1 · 2013-10-23T21:17:00

Solution 1

First of all check whether your

AddDept_ClientClick()

method is working properly by using alert('test').If it's working then change your

getElementById

is as below. Firstly just test for one link (remove all other links details inside the javascript function)

document.getElementById("lnkAddDept").style.color = "black"

Posted 23-Oct-13 21:17pm

Sampath Lokuge

Comments

Aravindba 24-Oct-13 4:04am

hai
thank u for ur reply,actually that java script work fine,i need mouse over function on same link button ,in that javascript i will change the font color to black,if default link button mouse over css work,but in chnage font color mouse over css not work.

In simple words what i try to say,if i changed font color for link button and try to use mouser over css,it not work,but i leave default property for link button ,mouse over css work,

Sampath Lokuge 24-Oct-13 4:13am

Sorry,still I'm not clear what you're trying to say.Now what happen when you click the link ? The things which you expect from JS is work for you or not ?.If it's working,what else you expect from JS function ?

Aravindba 24-Oct-13 4:46am

it work form javascript,just mouseover css not work.
just u try like this

drag and drop one link button and cssclass="chnage" below is css

.change:hover
{
color: Red;
text-decoration:underline;
cursor :pointer ;
}
and run ,it will work mouse over

and then in html code for link button properties just add font-color="black" and try,it not work css

Sampath Lokuge 24-Oct-13 4:55am

Can you set above scenario on jsFiidle :http://jsfiddle.net/
Use hyper link instead of LinkButton.

Aravindba 24-Oct-13 5:30am

yes ,just now i use hyper link,is not work,link button and hyper link mouse over work in default property only,if we change any fore color or any style using javascript or in html code ,mouse css not wotk.

And i try in another way,instead change font color,i just remove style form hyper link,by default hyper link have black color so it work for me

And i have another problem,Enabled= True or False and Disabled = True or False not work with linkbutton and hyper link , why ? if i use this properties buttons it will work

Sampath Lokuge 24-Oct-13 5:50am

For disable try this:

document.getElementById('Link1').disabled=true;
document.getElementById('Link1').removeAttribute('href');
document.getElementById('Link1').style.textDecoration = 'none';
document.getElementById('Link1').style.cursor = 'default';

For enable :

document.getElementById('Link1').disabled=false;
//assign href dynamically
document.getElementById('Link1').href = "somepage.html";
document.getElementById("Link1").style.textDecoration = "underline";
document.getElementById("Link1").style.cursor = "hand";

Aravindba 24-Oct-13 6:04am

thanx
i will use above code for hyper link in server side lnkAddUser.Attributes.Add("onmouseover", "this.style.cursor = 'default'")
it will appear default cursor(like arrow symbol) but if click hyper link the page get refreshed(i.e it will work click event)

form server side code i will enable and disabled link btn and hyper link ,it will disappear but i can click and page get works.

But for asp buttons i cant click,why enables and disabled correctly work for button and not for link button and hyper link

Sampath Lokuge 24-Oct-13 6:07am

Do you have any other issues (not clear)?

Aravindba 24-Oct-13 6:37am

no i have this issues only very big for me,and only in IE work,but in chrome and Mozilla i can click link button or hyper link even enabled is false from server side code.

Sampath Lokuge 24-Oct-13 6:42am

For hyperlink you have to use above mentioned JS code for disable or enable.It won't work with server side code.

Aravindba 24-Oct-13 6:52am

yes i know,but i try to add attributes in page load using ur java script propertis.
<asp:LinkButton ID="lnkAddDevice" runat="server" CssClass="change"
OnClientClick="return AddDevice_ClientClick()" Font-Underline="False" ForeColor="Black">Add Device

pls add in html page

and in page load server side
lnkAddDevice.enabled ="False"

and try to click in chrome and Mozilla,eventhough u cant get hand symbol u can click that link .pls try and reply

Sampath Lokuge 24-Oct-13 6:55am

Nope,My JS code cannot use with LinkBuuton. It can be applied only with hyper links.

Aravindba 24-Oct-13 23:18pm

ok,in hyper link in design window change the font color and use css for mouser over,is it work or not ?
or using JS code change the font color and use css for mouse over

Sampath Lokuge 25-Oct-13 1:52am

Try with js code.It should work.

Aravindba 25-Oct-13 1:59am

no i cant use js,bcz i use js for another functionality for same hyper link,only way to use in css

Sampath Lokuge 25-Oct-13 2:05am

You can do more than 1 task by using Js. Anyway can you put the setup of your codes on jsfiddle ?
Then I can try: http://jsfiddle.net/

Aravindba 25-Oct-13 3:31am

just now upload in http://jsfiddle.net/ can u give skype address are any other chat id ?
and i dont know how to use
it work mouse over css only,but in my project it work js also

Sampath Lokuge 25-Oct-13 3:40am

I couldn't see anything on your jsfiddler.So you have to 'save' your content and then send the updated url. You can get all of my details from here (But no chat on working hours :)): http://www.codeproject.com/Members/sampathlok

Aravindba 25-Oct-13 3:43am

http://jsfiddle.net/aravindb/TuTRa/1/