Geek Answers Handbook

Mouse over and CSS

I have an asp button control button on which I applied some style. I want the hover of this button to change the color of the button or something like that. But I don’t understand why in CSS the button freeze function doesn’t work! Please help. Also, please let me know what are the best effects we have for button hangs.

<asp:Button ID="btnSearch" runat="server" CssClass="button" OnClick="btnSearch_Click" Style="width: 480px;" Text="Search" /> .button { background: white; border: solid 1px grey; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: #001563; height: 25px; } .button:hover { background: white; border: solid 1px grey; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: Red; height: 25px; }
+4
source share
3 answers

Please check the following code:

  <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Style="width: 480px;" CssClass="button" Text="Search" /> <style type="text/css"> .button { background: white; border: solid 1px grey; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: #001563; height: 25px; } .button:hover { background: white; border: solid 1px grey; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: Red; height: 25px; }</style>
+7
source

asp: buttons appear as HTML input tags (submit button), so you cannot use the same CSS syntax as the hyperlink.

This should work in browsers (except MSIE):

(note: "button" is your class name)

 input.button:hover{ color: Green; }

or change all submit buttons:

 input[type="submit"]:hover{ color: Green; }

If you use Google for CSS methods to hover over buttons (enter buttons), you'll find some of the best CSS and JavaScript methods.

+1
source

Let the button style be determined by the operating system. It would not try to change this behavior. In most cases, you will fail.

The hover class pseudo-class is applied when the user assigns an element (with some pointing device), but does not activate it. For example, a visual user agent can apply this pseudo-class when the cursor (mouse pointer) hovers over the field generated by the element. Users who do not support interactive media do not need to support this pseudo-class. Some compatible user agents that support interactive media may not support this pseudo-class (for example, a pen device).

See Selectors

If you want to apply the hover effect to the button, then it is better to use the binding and use the image inside it.

 a:hover { }
0
source

More articles:


All Articles