---
title: "Lite lek med Mozilla"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/49850-lite-lek-med-mozilla"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "higa"
published: "2002-08-09T07:01:18.000Z"
updated: "2002-08-14T07:02:10.000Z"
replies: 8
views: 325
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/49850-lite-lek-med-mozilla"
---

# Lite lek med Mozilla

## #1 — higa, 2002-08-09T07:01Z

Igår så testade jag på kul att skapa rollover-knappar utan vare sig JavaScript eller bilder utan jag använde mig enbart av CSS + lite Mozilla extensions som ändå kommer att finnas i CSS3 vad jag hört.
Att hovra funkar som förväntat, men när jag klickar på länken så är den bara active(dvs ser nertryckt ut) kanske en tiondels sekund och inte tills jag släpper upp musen såsom Mozilla annars brukar reagera på :active
Vad bör jag fixa till?

Mvh Lukas

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.moi { width: 200px; height: 24px; position:relative; margin-bottom: 20px; display: block;}
.text {color: white; position: absolute; left:4px; top:4px; text-align: center;
			width: 200px; z-index: 4}
.bg { -moz-border-radius: 8px; border: 2px #245bff inset; background: #0000e5; 
			 position: absolute; left:0px; top:0px; width: 200px; height: 24px;
			 -moz-opacity: 0.7; z-index:3; }
.hilight1 { -moz-border-radius: 10px 0px 0px 0px; border-left: 3px #ebeeff solid; border-top: 3px #ebeeff solid; 
				 position: absolute; top: 2px; left: 2px; width: 60px; height: 14px; 
				 -moz-opacity: 0.1; z-index: 5; }
.hilight2 { -moz-border-radius: 10px 0px 0px 0px; border-left: 1px #ebeeff solid; border-top: 1px #ebeeff solid; 
				 position: absolute; top: 3px; left: 3px; width: 58px; height: 12px; 
				 -moz-opacity: 0.4; z-index: 5; }
.shadow1 { -moz-border-radius: 12px; background: #8080ff; border: 1px #a0a0ff solid; 
				position: absolute; top: 6px; left: 6px; width: 200px; height: 24px; z-index: 2; }
.shadow2 { -moz-border-radius: 14px; background: #b6b6ff; border: 1px #d8d8ff solid; 
				position: absolute; top: 4px; left: 4px; width: 204px; height: 28px; z-index: 1; }
.moi:hover .bg { background: #1354fe }
.moi:hover .hilight1 { -moz-opacity: 0.3 }
.moi:hover .hilight2 { -moz-opacity: 0.7 }
.moi:active .text { left: 6px; top: 6px; }
.moi:active .bg { left: 2px; top: 2px; }
.moi:active .hilight1 {left: 4px; top: 4px; width: 80px;}
.moi:active .hilight2 {left: 5px; top: 5px; width: 78px;}
.moi:active .shadow1 { top: 5px; left: 5px; width: 198px; height: 22px;}
.moi:active .shadow2 { top: 3px; left: 3px; width: 202px; height: 26px;}
-->
</style>

</head>
<body>
<a class="moi" href="http://www.aftonbladet.se">
<div class="text">Aftonbladet</div>
<div class="bg">&nbsp;</div>
<div class="hilight1">&nbsp;</div>
<div class="hilight2">&nbsp;</div>
<div class="shadow1">&nbsp;</div>
<div class="shadow2">&nbsp;</div>
</a>

<a class="moi" href="http://www.mozilla.org">
<div class="text">Mozilla</div>
<div class="bg">&nbsp;</div>
<div class="hilight1">&nbsp;</div>
<div class="hilight2">&nbsp;</div>
<div class="shadow1">&nbsp;</div>
<div class="shadow2">&nbsp;</div>
</a>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/49850

## #2 — netfeed, 2002-08-09T13:14Z

kan du kägga upp en länk där du visar hur det ser ut?

Permalänk: https://www.webforum.nu/p/747023

## #3 — Web-Tor, 2002-08-09T13:17Z

**higa »**
Under din kontrollpanel så finns ett menyval som heter "Mina filer".
Där kan du ladda upp sidan. ;)

Permalänk: https://www.webforum.nu/p/747025

## #4 — higa, 2002-08-12T08:42Z

Ok
HTML-dokumentet : <http://member.webforum.nu/884/mozilla_ext_test.html>
Screenshot på  hover-effekten : <http://member.webforum.nu/884/hover.png>
Screenshot på active-effekten : <http://member.webforum.nu/884/active.png>

Permalänk: https://www.webforum.nu/p/748749

## #5 — netfeed, 2002-08-12T16:33Z

i min så ligger "aftonbladet" över den översta mendans de andra ligger rätt

Permalänk: https://www.webforum.nu/p/749067

## #6 — higa, 2002-08-13T07:55Z

Hmm, låter skumt, fick samma problem när jag klickade på min uppladdade fil, när jag däremot tog en viewsource, kopierade koden och klistrade in det i ett tomt dokument så funkade det förutom att a.moi bara är active ett ögonblick och inte tills man släpper upp musen.

Permalänk: https://www.webforum.nu/p/752319

## #7 — Ohrstrom, 2002-08-13T22:14Z

saxade koden men hoverandet funkade inte för mig.... (ie 5.5)

Permalänk: https://www.webforum.nu/p/753097

## #8 — Chainsaw, 2002-08-13T22:36Z

...vilket beror på att IE suger, och är den läsare som har sämst stöd för CSS.

Okej, dags för den längre och seriösa förklaringen. Om jag inte minns helt fel så stödjer inte IE5 hover på något annat än länkar. Grav bugg, alltså. Vet inte hur det är med sexan på den fronten. Förhoppningsvis så är det mycket bättre.

Permalänk: https://www.webforum.nu/p/753131

## #9 — higa, 2002-08-14T07:02Z

Chainsaw: tyvärr stödjer IE6 också bara hover på länkar :(

Ang. min lilla lek med -moz-opacity och -moz-border-radius så verkar det som om a.moi visserligen blir "active" när man trycker på den, men att den blir "inaktive" nästan omedelbart, har testat att sätta z-index:7 på a.moi, men det funka inte, någon som har nån aning om vad jag gjort för fel?

Permalänk: https://www.webforum.nu/p/753245

---

Tråden på webben: https://www.webforum.nu/amne/html-css/49850-lite-lek-med-mozilla
