Definisanje hovera za svaki link

Threaded Mode | Linear Mode

Definisanje hovera za svaki link

Author Message

stefo
Forumaš

Posts: 385
Group: Registered
Joined: Jun 2006
Status: Offline
Reputation: 3

Post: #1

Definisanje hovera za svaki link

Radim jedan sajt i zapeo sam. Moj prijatelj je odradio dizajn u Photoshopu a ja sam to prebacio u web format(izrezao slicice i napravio CSS kod).

U attachmentu sam prilozio sliku headera. I sad u ovim kukicama se nalaze linkovi. I mene zanima kako da definisem za svaki link poseban a:hover?
Znaci link koji se nalazi u zelenoj kukici da ima zelenu boju kad se predje preko njega misem.

Attached File(s) Thumbnail(s)

Kako kokoshka abortira?Snese jaje na beton.

http://www.stefosimple.co.nr

13-08-2008 02:58 PM

Morrison
Forumaš

Posts: 564
Group: Registered
Joined: Mar 2007
Status: Offline
Reputation: 10

Post: #2

RE: Definisanje hovera za svaki link

Prvo trebaš html markup za svaki od njih :

Code:

<a class="green" href="#">Link 1</a>

<a class="blue" href="#">Link 2</a>

<a class="orange" href="#">Link 3</a>

<a class="velvet" href="#">Link 4</a>

onda CSS :

Code:

a:hover .green

{

  color: green;

}

a:hover .blue

{

  color: blue;

}

a:hover .orange

{

  color: orange;

}

a:hover .velvet

{

  color: velvet;

}

This post was last modified: 13-08-2008 04:43 PM by Morrison.

13-08-2008 04:41 PM

stefo
Forumaš

Posts: 385
Group: Registered
Joined: Jun 2006
Status: Offline
Reputation: 3

Post: #3

RE: Definisanje hovera za svaki link

Nece. Pazi imam divider koji se zove header,a unutar njega je divider koji se zove meni.
Probao sam tvoj nacin i jos par nacina ali ne ide.

Kako kokoshka abortira?Snese jaje na beton.

http://www.stefosimple.co.nr

13-08-2008 05:30 PM

Morrison
Forumaš

Posts: 564
Group: Registered
Joined: Mar 2007
Status: Offline
Reputation: 10

Post: #4

RE: Definisanje hovera za svaki link

Ajd mi uploadaj te fajlove pa ću se poigrat.

13-08-2008 05:37 PM

Len0
Redoviti posjetitelj

Posts: 249
Group: Registered
Joined: Mar 2007
Status: Offline
Reputation: 2

Post: #5

RE: Definisanje hovera za svaki link

HTML

Code:

<div id="green"><a  href="#">Link 1</a></div>

<div id="blue"><a  href="#">Link 2</a></div>

<div id="orange"><a  href="#">Link 3</a></div>

<div id="velvet"><a  href="#">Link 4</a></div>

CSS

Code:

#green a:hover

{

  color: green;

}

#blue a:hover 

{

  color: blue;

}

#orange a:hover 

{

  color: orange;

}

#velvet a:hover

{

  color: velvet;

}

Probaj ovako, trebalo bi da radi.

RTFM - Rich Text Format Manual

13-08-2008 09:31 PM

Morrison
Forumaš

Posts: 564
Group: Registered
Joined: Mar 2007
Status: Offline
Reputation: 10

Post: #6

RE: Definisanje hovera za svaki link

Velika greška LenO, id-ove se treba izbjegavat.
Posebno tolko nepotrebnih divova jer markup mora biti minimalistički što je moguće više.
Tj nije tehnička greška ali je greška dizajna općenito.

Ovo treba radit moje no neznam njegov markup tako da mi je teško reć dok ne vidim.

EDIT: zaboravio sam da tako to nejde, evo rješenja koje radi provjereno

Code:

<html>

<head>

 <title> Hover linkovi </title>

 <style type="text/css" media="screen">

 .green:hover {

  color: green;

 }

 .blue:hover {

  color: blue;

 }

 .orange:hover {

  color: orange;

 }

 .purple:hover {

  color: purple;

 }

 </style>

</head>

<body>

<a class="green"  href="#">Link 1</a>

<a class="blue"   href="#">Link 2</a>

<a class="orange" href="#">Link 3</a>

<a class="purple" href="#">Link 4</a>

</body>

</html>

This post was last modified: 13-08-2008 10:54 PM by Morrison.

13-08-2008 10:29 PM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites