Post Reply  Post Thread 
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
Visit this user's website Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
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
Visit this user's website Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
Post Reply  Post Thread 

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

Forum Jump: