Overclock.net banner
Cancel

Having trouble with a:hover styling on CSS.

Jump to Latest Follow
1 - 16 of 16 Posts
NinjaSushi2

· Registered
Joined
·
1,624 Posts
Discussion Starter · #1 ·
This is a homework assignment for class that I want to look good.

So I am attempting to make my links when hovered over blow up or increase in size if you will to 150%.

I tried

Code:

Code: 
a:hover
{
font-size:150%;
}
but it isn't working correctly.

Here are my current links using styling tags.

Code:

Code: 
<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<!-- test code here -->
<a style="hover; font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities

<!-- end footer -->
And here is my entire code with no content yet. Trying to get the skeleton of the webpage up first.

Code:

Code: 
<!DOCTYPE html>

<!--

        documentation segment
        website: Pittsburgh
        web page: pittsburgh.htm
        author: manderson
        date created: feb.2013

-->

60's

<!-- begin wrapper -->
<!-- begin master -->
<!-- begin message -->

<a name="shopping"/>

Click on what you want to know about!

<!-- end message -->

<!-- begin content -->

<!-- end content -->

<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<a style="ex2:hover; font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities

<!-- end footer -->
<!-- end master -->
<!-- end wrapper -->
Anyways thanks for looking it over.
biggrin.gif
I've posted at other website but those guys are such jerks. So it's back to good ol' trusty OCN.
thumb.gif
 
DaClownie

· Premium Member
Joined
·
6,029 Posts
#2 ·
Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
 
Save Share
Reply Quote
NinjaSushi2

· Registered
Joined
·
1,624 Posts
Discussion Starter · #3 ·
Quote:
Originally Posted by DaClownie View Post

Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
Click to expand...
That would defeat the purpose of hover. I don't care if the normal font is bigger. I want it so that when someone hovers over a link it will enlarge the text so they know the link is working correctly.
 
DaClownie

· Premium Member
Joined
·
6,029 Posts
#4 ·
Quote:
Originally Posted by NinjaSushi2 View Post

Quote:
Originally Posted by DaClownie View Post

Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
Click to expand...
That would defeat the purpose of hover. I don't care if the normal font is bigger. I want it so that when someone hovers over a link it will enlarge the text so they know the link is working correctly.
Click to expand...
Exactly... a:hover{font-size:1.5em;}

It works.
 
Save Share
Reply Quote
DaClownie

· Premium Member
Joined
·
6,029 Posts
#6 ·
Quote:
Originally Posted by NinjaSushi2 View Post

I see. I will try it later in the morning. Nap time.
Click to expand...
Not a problem. I work overnights... providing the OCN tech support on 3rd shift! lol
 
Save Share
Reply Quote
3930K

· Registered
Joined
·
7,994 Posts
#9 ·
This is your problem:

(From W3C Schools)
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
 
Save Share
Reply Quote
DaClownie

· Premium Member
Joined
·
6,029 Posts
#11 ·
Quote:
Originally Posted by NinjaSushi2 View Post

Quote:
Originally Posted by 3930K View Post

This is your problem:

(From W3C Schools)
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Click to expand...
Epic face palm...
doh.gif


Bought to find out! lol

Got the link for it?

Edit: Doesn't work.
Click to expand...
Works for me in Google Chrome...

What browser are you using? It could be the way you're doing your links, as in, perhaps the individual classes on each link is overwriting and superseding your a:hover in your global style sheet
 
Save Share
Reply Quote
NinjaSushi2

· Registered
Joined
·
1,624 Posts
Discussion Starter · #12 ·
Code:

Code: 
<!DOCTYPE html>

<!--

        documentation segment
        website: Pittsburgh
        web page: pittsburgh.htm
        author: manderson
        date created: feb.2013

-->

60's

<!-- begin wrapper -->
<!-- begin master -->
<!-- begin message -->

Pittsburgh, 1960's

<!-- end message -->
<!-- begin message -->

[URL=../../index.htm]Home

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="tvradio.htm">TV & Radio

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="activities.htm">Activities

<!-- end navigation -->
<!-- begin content -->

<a style="font-family:Trebuchet MS; font-size:1.7em; font-weight:900; color:#000";>WALK DOWN MEMORY LANE in Pittsburgh, Dana Spriggs

<a style="font-family:Trebuchet MS; font-size:1.3em; font-weight:300; color:#000";>

The 1960's started with the Pittsburgh Pirates winning the World Series over the New York Yankees in 1960.

[MEDIA=youtube]youtube-noc[/MEDIA]

The final phase of the Parkway West project was completed as the Fort Pitt tunnels open on September 1, 1960. Prior to the opening of the tunnels motorists had to exit the Parkway West and go via the West End Circle and go across the point bridge to get to downtown Pittsburgh.

Civic Arena opens in 1961 and many events take place in the new arena. Ice Capades, Ringling Brothers Circus, WWWF wrestling and many concerts took place during the 1960's. The Beatles, Elvis Presley and Frank Sinatra all performed there. In the late 60's KQV radio would present its "Shower of Stars concert series where you got to see 4 or 5 acts. Pittsburgh Penguins hockey was also played at the civic arena in the 60's.

Interstate 79 connecting Erie with Washington, PA, is completed by the late 1960's. "The Bridge to Nowhere" is finally completed in 1969 just in time for Three Rivers Stadium to open in 1970. The bridge was started in the early 60's and then a few years went by before it finally was completed.

<!-- end content -->
<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities 
<!-- end footer -->

<!-- begin footer2 -->
<a style="font-family:Trebuchet MS; font-size:1.2em; font-weight:900; color:#33ffff";>References: Youtube.
<!-- end footer2 -->

<!-- begin footer3 -->
<a style="text-decoration:underline; font-family:Trebuchet MS; font-size:1.2em; font-weight:900; color:#c1cdcd"; href=https://www.youtube.com/watch?feature=player_embedded&v=Bs8foFpXpwU>Pittsburgh Pirates win World Series 1960[/URL]
<!-- end footer3 -->

<!-- end master -->
<!-- end wrapper -->
 
T

· Registered
Joined
·
80 Posts
#14 ·
The problem is your putting some styles in the tag so it overwrites whatever you have in the css. So this

Code:

Code: 
<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="../../index.htm">Home
should be

Code:

Code: 
<a href="../../index.htm">Home
and do that for all your a tags, but you're also gonna have to put all the attributes that were inline that we deleted in your css like this :

Code:

Code: 
a
{
        font-family:Trebuchet MS;
        margin:1em;
        font-weight:900;
        text-decoration:none;
        font-size:1.2em; 
        color:#000
}
now if you do these in your css

Code:

Code: 
a:link
{
}
a:visited {

}
a:active {

}
a:hover {
        font-size: 150% 
}
it should work. Also you didn't close your body tag properly you forget the closing >. Hopefully everything makes sense
 
randomizer

· Fantastic Mr Fox
Joined
·
7,143 Posts
#16 ·
Quote:
Originally Posted by NinjaSushi2 View Post

Code:

Code: 
a:link, a:visited, a:active, a:hover
{
        color:#ffffff;
        font-size: 1.5em;
}
Click to expand...
I don't think you want this. You are setting links to 1.5em for all states, not just hover. You won't be able see any difference. On top of that, the_duke's note about inline styles is also correct. In general you should only use inline styles if you absolutely have to, and this is usually because they were set with JavaScript. Inline styles override all other styles except those marked with the !important flag (if you need to use this, you are almost always doing it wrong).

Ignoring CSS selector specificity*, styles get applied in the following order:

External stylesheets
Internal stylesheets (inside style tags)
Inline stylesheets (inside style attributes on individual elements)

The above is why we call them cascading style sheets. In addition to this, styles get applied in the order that they appear for each type of stylesheet above. If you set a:link to have a colour of #fff in an external stylesheet and later a colour of #000 (in the same stylesheet) then it will appear black.

*This can be even more annoying than the fact that styles are applied in a cascading manner. For example:

Code:

Code: 
.footer a { color: #000 }

... /*200 lines of more CSS*/

a { color : #FFF }
According to what I said above, the latter rule will override the former rule. However, the browser will apply styles with a more specific selector after styles which are less specific, even if the less specific ones are further down in the file. This only applies to styles within the same stylesheet type. An inline style will still override a very specific internal or external selector. See the below example:

Code:

Code: 
[URL=#]link[/URL]
Despite the fact that I have a very specific (and downright ugly) selector in the internal stylesheet, the link will still be red. If the inline style was removed, the link would be black rather than red or white.

Specificity is a bit tricky. If an element doesn't get styled how you think it should be, use a tool like Firebug or Chrome's element inspector to see the styles being applied and which styles are being overridden by others. Both tools will show styles in the reverse order that they were applied, so the top-most styles which are not overridden are what you will see rendered.
 
Save Share
Reply Quote
1 - 16 of 16 Posts
This is an older thread, you may not receive a response, and could be reviving an old thread. Please consider creating a new thread.
About this Discussion
15 Replies
5 Participants
Last post:
randomizer
Overclock.net
A forum community dedicated to overclocking enthusiasts and testing the limits of computing. Come join the discussion about computing, builds, collections, displays, models, styles, scales, specifications, reviews, accessories, classifieds, and more!
Full Forum Listing
Explore Our Forums
Hardware News Intel CPUs PC Gaming NVIDIA Water Cooling
Top