Highlight a button on mouse hover

[astrixtech]

Hi , I am creating a list in sharepoint with two buttons for creating and getting the details of the list item.Here,when the user is hovering the mouse on buttons,the buttons should be highlighted. I have put the below code in css for changing the color. btn:hover { background-color:Silver; } Here,btn is the class name. But this didnt bring the expected change. What am I missing? Pls help.

[Graham Breach]

If "btn" is the class name, you are missing a '.' character in front:

.btn:hover
{
background-color:Silver;
}

[Blikkies]

You forgot to add the . in front of you class name, should look as follows:

.btn:hover
{
background-color:Silver;
}

[astrixtech]

Actually its a typo from my side when entered the question.Still its not working.

[Blikkies]

Is the btn class in a style sheet or in a tags in the page?</x-turndown>

[astrixtech]

It is in the style sheet. And for the button I have mentioned the class as btnhover.

[Blikkies]

Here is few things you can check Make sure the style sheet is correctly referenced in you page. Make sure that there is no other styles overwriting the btn:hover class Make sure that the default btn style background-color does not have !important after it If nothing works, try adding !important to you background-color style in you .btn:hover class e.g.

.btn:hover
{
background-color:Silver !important;
}

If the problem still exists, provide more html and style sheet code

[astrixtech]

The following is the button that I have created.I havent mentioned background color for default style.

Still it doesnt work.

[astrixtech]

Hey Theres some improvement in the issue.I have made the below changes

input name="btnOkay" class="btn" title="btnOkay" disabled="disabled" type="button" value="Okay" style="position:relative;left: 50%;top:50%;zoom: 1;width:150;height:30;border-radius:10px;color:white;" />

Now its showing the color change. But I have to do some more modifications like , the button shouldnt highlight when its disabled. Currently its highlighting irrespective of the disable status.Should I use JQuery to apply this logic or is there any other alternative?

[Blikkies]

you can add another class .btn:disabled and add you styles that must show when the button is disabled e.g.

.btn:disabled
{
backgrouund-color: grey;
}

But I think you have to add !important so that the .btn:hover does not overwrite the new class

[astrixtech]

Just now I have tried this code. One thing I have noticed is that , in the sharepoint designer, the properties that listed out once I wrote '.btn:' didnt contain 'disabled'. Still I have put the code as told,but the result is the same. I have mentioned !important also. But with no change in the result.