8 svar · 562 visningar · startad av fjuri
Hellu...
Eftersom det inte finns någon CSS specifikt forum här, så får väl HTML forumet duga :)
Nu till min fråga:
Det jag letar efter är en funktion i CSS som ger följande effekt. Om vi säger att vi har en länk som heter "Länk", så vill jag att när man för muspekarn över den (hover) så ska två stycken > tecken komma framför länken (eller på en > på ena sidan och en < på den andra).
Länken ska alltså se ut på följande:
>>Länk
eller
>Länk<
Finns det någon sådan funktion i CSS? Jag vill inte gärna använda JavaScript/Java (där vet jag hur koden ska se ut).
Tack på förhand
------------------
Mvh
/Andreas P
Du skulle kunna göra så att du i länken angav tecknena > och < i sidans bakgrundsfärg, men inkludera dem i länken i alla fall. Så när du förde musen över dem så dök HOVER färgen upp och de blir synliga.
Jag kom bara på det sådär just precis :) så det kan hända att det inte funkar rakt av, men det är kanske en idé som du kan utveckla. Du får gärna berätta här om och hur du gjorde för att lyckas.
Hejsan och tack för ditt inlägg!
Om jag förstått det rätt så ska > och < vara en viss färg som är samma som bakgrunden. När man sedan gör hover över länken så kommer > och < fram i en annan färg?
Är det så du menar? (ville bara extra checka ;)
Hmm... jo, det kan ju vara en idée som är värd att extra forska i. Återkommer om jag får det att funka eller ifall jag har vidare frågor.
------------------
Mvh
/Andreas P
Helluuuuu!
Verkar som om du lättare skulle kunna göra det med hjälp av JavaScript och med egenskapen "innerHTML". Jag är ingen expert på JavaScript men jag tror att det skulle se ut så här ungefär (med lite modifikation):
====================================================================
<a href="http://www.minlänk.se" onMouseover"this.innerHTML='< länk 1 >'" onMouseout="this.innerHTML='>> länk'">>> länk</a>
====================================================================
Jag tror inte ens du behöver ange ">> länk" inom <a>-taggen.
Vem vet, det kanske fungerar.... :D
------------------
/ Torbjörn Hansson
[Redigerat av toha den 26 dec 1999]
[Redigerat av toha den 26 dec 1999]
Det löser man knappast med CSS. Däremot med Javascript + DOM. CSS är style sheets, inget annat.
/g - vill hålla ordning på begreppen :)
------------------
----------------------------
Gunnar Liljas - webbutvecklare
Leon Reklambyrå AB
Norrköping
Hej och tack för alla tips!
Gunnar, Toha sa ju trots allt att det var JavaScript:
"Verkar som om du lättare skulle kunna göra det med hjälp av JavaScript och med egenskapen "innerHTML"."
Så han är nog medveten :)
Och alla tips är ju välkomna, trodde inte att man kunde lösa det på detta sätt i JavaScript. Men vad vet jag om JavaScript, inte ett dyff :)
Tack ivarje fall, ska ta och testa det!
------------------
Mvh
/Andreas P
Det går att göra en ganska klumpig variant i CSS (som bara funkar i Explorer) inte för att jag rekommenderar denna lösning, men vill bara visa att det går. Jag är övertygad om att det finns bättre lösningar men här är en...
<HTML>
<HEAD>
<STYLE TYPE="text/css">
A:link {color: #cccccc; text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {color: #ff0000; font-weight: bold; text-decoration: none}
</STYLE>
<TITLE>Untitled</TITLE>
</HEAD>
<BODY BGCOLOR="#CCCCCC">
<A HREF="http://www.webforum.nu/">>> <FONT COLOR="#000000"><B>Hallå</B></FONT> <<</FONT></A>
</BODY>
</HTML>
På grund av att den "trevliga" :h -smileygubben dyker upp så kan man inte se att det står : och H. Ersätt Smileyn med detta!
[Redigerat av Sune den 27 dec 1999]
Det är väl oftast så med Netscape, alltid steget efter när det gäller effekter och funktioner.
Men tusen tack för tipset!
Jo, dessa smileys ställer till det. Jag har hört av mig till webForums kådarna och de ska fixa så att de inte dyker upp inom [kod] taggen.
Får se hur det blir med den saken.
------------------
Mvh
/Andreas P
Kjell har fixat Smileysarna (för denna gången i alla fall) ;)
------------------
Med vänliga hälsningar,
Sune Andersson, webForum Admin.