CSS Hover
-
Hi,Am not sure whether this is the right place to post this question,pardon me . i am devoloping a website.Am papplying CSS.I ahev a hyper link.When i move mouse over teh hyper link i want the link displayed as "google" to change the color and enlarge.i tried hover; a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } But this is not helping me. My entire code lookds like this; BODY { } .intro{ FONT-WEIGHT: bold; FONT-SIZE: 14pt; font-family: arial; color:green; } .cashback{ FONT-SIZE: 14pt; COLOR: lime; FONT-STYLE: italic; FONT-FAMILY: Arial; } .heading{ font-weight:lighter; FONT-SIZE: 18pt; COLOR: #09529E; FONT-FAMILY: Arial; } .notavailable{ FONT-SIZE: 9pt; COLOR: green; FONT-FAMILY: Arial; } .tabs { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; COLOR: #09529E; TEXT-ALIGN: center } A:link { COLOR: #09529E; TEXT-DECORATION: none; } A:visited { COLOR: #FFFFFF; TEXT-DECORATION: none; outline:none; } a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } How can i modify this tto so that when my mouse moves over the google hyprelink in my webpage it will enlarge and chage the color. Thanking You;
-
Hi,Am not sure whether this is the right place to post this question,pardon me . i am devoloping a website.Am papplying CSS.I ahev a hyper link.When i move mouse over teh hyper link i want the link displayed as "google" to change the color and enlarge.i tried hover; a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } But this is not helping me. My entire code lookds like this; BODY { } .intro{ FONT-WEIGHT: bold; FONT-SIZE: 14pt; font-family: arial; color:green; } .cashback{ FONT-SIZE: 14pt; COLOR: lime; FONT-STYLE: italic; FONT-FAMILY: Arial; } .heading{ font-weight:lighter; FONT-SIZE: 18pt; COLOR: #09529E; FONT-FAMILY: Arial; } .notavailable{ FONT-SIZE: 9pt; COLOR: green; FONT-FAMILY: Arial; } .tabs { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; COLOR: #09529E; TEXT-ALIGN: center } A:link { COLOR: #09529E; TEXT-DECORATION: none; } A:visited { COLOR: #FFFFFF; TEXT-DECORATION: none; outline:none; } a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } How can i modify this tto so that when my mouse moves over the google hyprelink in my webpage it will enlarge and chage the color. Thanking You;
change "A" to "a". Similarly, all of the CSS element names are all supposed to be lower-case (for instance, "PADDING" should be "padding"). Also, CSS ID names and class names are also case-sensitive. If you declared "myClass" in your style sheet, you MUST use it as "myClass" in your html. Any variation in case from the declared name will be ignored.
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001 -
change "A" to "a". Similarly, all of the CSS element names are all supposed to be lower-case (for instance, "PADDING" should be "padding"). Also, CSS ID names and class names are also case-sensitive. If you declared "myClass" in your style sheet, you MUST use it as "myClass" in your html. Any variation in case from the declared name will be ignored.
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001Hi, Thanks,but still the issue persists; My source: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link rel="Stylesheet" href="customer.css" /> </head> <body> <form id="form1" runat="server"><br /> <br/> <br/> <div class="cashback" > <asp:HyperLink ID="HyperLink1" CssClass="tabs" runat="server" NavigateUrl="http://www.google.co.in" BackColor="Transparent" BorderColor="#FFC0C0">Google</asp:HyperLink></div><br/> <br/> <div class="intro"> Program </div> <div class="cashback"> Get Cash back </div> <br/> <div class="notavailable"> Please inquire with your local company .</div> <br/> <div class="heading"> Mission Statement </div> <br/> Our mission has been simply stated and vigorously followed. <br/> <br/> <div class="heading">Brief History</div> <br/> We xxxxxxxxx </form> </body> </html> My CSS: BODY { } .intro{ font-weight: bold; font-size: 14pt; font-family: arial; color:green; } .cashback{ font-size: 14pt; color: lime; font-style: italic; font-family: Arial; } .heading{ font-weight:lighter; font-size: 18pt; color: #09529E; font-family: Arial; } .notavailable{ font-size: 9pt; color: green; font-family: Arial; } .tabs { padding-right: 5px; padding-left: 5px; font-weight: bold; color: #09529E; text-align: center } A.tabs:link { color: #09529E; text-decoration: none; } A.tabs:visited { color: #FFFFFF; text-decoration: none; outline:none; } a.tabs:hover {color: orange; text-decoration: underline; } A.tabs:active { color: lime } May be this will help Thanking you,
-
Hi, Thanks,but still the issue persists; My source: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link rel="Stylesheet" href="customer.css" /> </head> <body> <form id="form1" runat="server"><br /> <br/> <br/> <div class="cashback" > <asp:HyperLink ID="HyperLink1" CssClass="tabs" runat="server" NavigateUrl="http://www.google.co.in" BackColor="Transparent" BorderColor="#FFC0C0">Google</asp:HyperLink></div><br/> <br/> <div class="intro"> Program </div> <div class="cashback"> Get Cash back </div> <br/> <div class="notavailable"> Please inquire with your local company .</div> <br/> <div class="heading"> Mission Statement </div> <br/> Our mission has been simply stated and vigorously followed. <br/> <br/> <div class="heading">Brief History</div> <br/> We xxxxxxxxx </form> </body> </html> My CSS: BODY { } .intro{ font-weight: bold; font-size: 14pt; font-family: arial; color:green; } .cashback{ font-size: 14pt; color: lime; font-style: italic; font-family: Arial; } .heading{ font-weight:lighter; font-size: 18pt; color: #09529E; font-family: Arial; } .notavailable{ font-size: 9pt; color: green; font-family: Arial; } .tabs { padding-right: 5px; padding-left: 5px; font-weight: bold; color: #09529E; text-align: center } A.tabs:link { color: #09529E; text-decoration: none; } A.tabs:visited { color: #FFFFFF; text-decoration: none; outline:none; } a.tabs:hover {color: orange; text-decoration: underline; } A.tabs:active { color: lime } May be this will help Thanking you,
Change "A" to "a". You still have "A.tabs"
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001 -
Hi,Am not sure whether this is the right place to post this question,pardon me . i am devoloping a website.Am papplying CSS.I ahev a hyper link.When i move mouse over teh hyper link i want the link displayed as "google" to change the color and enlarge.i tried hover; a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } But this is not helping me. My entire code lookds like this; BODY { } .intro{ FONT-WEIGHT: bold; FONT-SIZE: 14pt; font-family: arial; color:green; } .cashback{ FONT-SIZE: 14pt; COLOR: lime; FONT-STYLE: italic; FONT-FAMILY: Arial; } .heading{ font-weight:lighter; FONT-SIZE: 18pt; COLOR: #09529E; FONT-FAMILY: Arial; } .notavailable{ FONT-SIZE: 9pt; COLOR: green; FONT-FAMILY: Arial; } .tabs { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; COLOR: #09529E; TEXT-ALIGN: center } A:link { COLOR: #09529E; TEXT-DECORATION: none; } A:visited { COLOR: #FFFFFF; TEXT-DECORATION: none; outline:none; } a.nav:hover {color: orange; text-decoration: underline; } A:hover { color: #09529E; font-size :larger; } How can i modify this tto so that when my mouse moves over the google hyprelink in my webpage it will enlarge and chage the color. Thanking You;
Please be courteous to your reader and correct typos!
"So what's the future like? Are there flying cars and everything's clean?" "No, the cars are still on the ground and it's even dirtier, but we're working on it." From: Quantum Leap (not verbatim) {o,o}.oO( Want a great RSS reader? Try FeedBeast! ) |)””’) ( Check out my profile for a special CodeProject deal! ) -”-”-
-
Please be courteous to your reader and correct typos!
"So what's the future like? Are there flying cars and everything's clean?" "No, the cars are still on the ground and it's even dirtier, but we're working on it." From: Quantum Leap (not verbatim) {o,o}.oO( Want a great RSS reader? Try FeedBeast! ) |)””’) ( Check out my profile for a special CodeProject deal! ) -”-”-
Hi, Thanks now it works. Thanks for the help. I changed it like this BODY { } .intro{ font-weight: bold; font-size: 14pt; font-family: arial; color:green; } .cashback{ font-size: 14pt; color: lime; font-style: italic; font-family: Arial; } .heading{ font-weight:lighter; font-size: 18pt; color: #09529E; font-family: Arial; } .notavailable{ font-size: 9pt; color: green; font-family: Arial; } .tabs { padding-right: 5px; padding-left: 5px; font-weight: bold; color: #09529E; text-align: center; text-decoration: none;line-height:24px; } a.tabs:link { color: #09529E; text-decoration: none; } a.tabs:visited { color: #000000; text-decoration: none; outline:none; } a.tabs:hover {color: orange; text-decoration: none;font-size: 24pt; } a.tabs:active { color: lime; } Thanks again
