HTML and CSS

Add mouseover change color to links and background on Vbulletin?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2009

Posts: 37

Reputation: Gearspro is an unknown quantity at this point

Solved Threads: 0

Gearspro

Offline

Light Poster

Add mouseover change color to links and background on Vbulletin?

-1

Sep 29th, 2009

Hey Daniwebs members

Was wondering if any one could tell me how to add the mouseover to links? because i've tried applying the style sheet, but it doesnt seem to be working

Can someone tell me how to do this pleaseeeeeeeeeeeee

•

Join Date: Dec 2008

Posts: 64

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: Add mouseover change color to links and background on Vbulletin?

Oct 4th, 2009

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

a:hover
{
  background-color: blue;
  color: white;
}

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Aug 2009

Posts: 37

Reputation: Gearspro is an unknown quantity at this point

Solved Threads: 0

Gearspro

Offline

Light Poster

Re: Add mouseover change color to links and background on Vbulletin?

Oct 4th, 2009

•

Originally Posted by cfajohnson

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
a:hover
{
  background-color: blue;
  color: white;
}
a:hover { background-color: blue; color: white; }

Thanks for the info, but where in the coding do i apply this?

•

Join Date: Jan 2009

Posts: 1,380

Reputation: almostbob has a spectacular aura about

Solved Threads: 167

almostbob

Offline

Nearly a Posting Virtuoso

Re: Add mouseover change color to links and background on Vbulletin?

Oct 4th, 2009

external stylesheet

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/style.css">
</head>
<body>
bla bla bla
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/style.css">
</head>
<body>
bla bla bla
</body>
</html>

with style.css containing amid the other styles

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
a:hover { background-color: blue; color: white; }
a:hover { background-color: blue; color: white; }

header styles

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<style type='text/css'>
<!--
a:hover { background-color: blue; color: white; }
-->
<style>
</head>
<body>
bla bla bla
</body></html>
<html>
<head>
<style type='text/css'>
<!--
a:hover { background-color: blue; color: white; }
-->
<style>
</head>
<body>
bla bla bla
</body></html>

inline styles

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
</head>
<body>
<a href='thisfile' style="hover { background-color: blue; color: white; }" > thisfile </a>
</body>
</html>
<html>
<head>
</head>
<body>
<a href='thisfile' style="hover { background-color: blue; color: white; }" > thisfile </a>
</body>
</html>

most use external stylesheets
only one file need be altered to update the whole site
header styles, contain the full stylesheet in every page
inline styles contain the full style in every link on every page
they get exponentially bigger
each has a purpose
external stylesheet to style a site
header style to make a single page different
inline style to make a single element different

Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Dec 2008

Posts: 64

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Oct 7th, 2009

•

Originally Posted by almostbob

external stylesheet[code=html]
<html>
<head>
<style type='text/css'>
<!--

There is no need to comment out the style rules, and hasn't been since Netscape 4.

•

<a href='thisfile' style="hover { background-color: blue; color: white; }" > thisfile </a>

Where did you come up with that? It's nonsense! Did you even try it?

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Jan 2009

Posts: 1,380

Reputation: almostbob has a spectacular aura about

Solved Threads: 167

almostbob

Offline

Nearly a Posting Virtuoso

Oct 7th, 2009

never left out a colon?
its a typo, Human error

<a href="http://www.w3.org/style/CSS"   style="{color: blue; background: white}      :visited {color: green}      :hover {background: yellow}      :visited:hover {color: purple}      ">  Example of a hyperlink to the CSS home page with special one-off  visited and hover effects. </a>

•

Join Date: Dec 2008

Posts: 64

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Oct 7th, 2009

•

Originally Posted by almostbob

never left out a colon?
its a typo, Human error
<a href="http://www.w3.org/style/CSS" style="{color: blue; background: white} :visited {color: green} :hover {background: yellow} :visited:hover {color: purple} "> Example of a hyperlink to the CSS home page with special one-off visited and hover effects. </a>

That even more bizarre. Does it work anywhere?

Chris F.A. Johnson
http://cfajohnson.com

•

Join Date: Aug 2009

Posts: 37

Reputation: Gearspro is an unknown quantity at this point

Solved Threads: 0

Gearspro

Offline

Light Poster

Oct 9th, 2009

Thanks for all the help guys, but can someone classify which is the best to implement on a site, because its confusing as people are saying some are really old, dont work at all etc.

Thanks.