/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Hover-effekten
Fra : Morten Romby


Dato : 17-02-06 10:27

Hey folkens

Jeg har 4 div-elementer jeg gerne vil have omkranset af link-tag
med hover-effekt. Div-elementer danner tilsammen en rektangulær
kasse på 300px(bred) gange 15px(høj). Meningen er så at når musen
er en vilkårligt sted på kassen, så vises blå baggrund.

Jeg har forsøgt med forskellige konstellationer, f.eks. at
udskifte div-elementer til <p>-elementer, MEN jeg kan ikke få det
til at fungere - HVAD GØR JEG?


<a class="mlink" href="http://www.blabla.dk/">
<div style="float:left; width:75px; height:15px;"></div>
<div style="float:left; width:75px; height:15px;"></div>
<div style="float:left; width:75px; height:15px;"></div>
<div style="float:left; width:75px; height:15px;"></div>
</a>

a.mlink:link,a.mlink:visited,a.mlink:active{
font-family:verdana,arial,sans-serif;
color:#000080; display:block;
width: 300px; text-decoration: none;
font-size:10px; background:url(usynlig.gif);
font-weight:normal; }

a.mlink:hover {background:blue; color:white;}

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Bertel Lund Hansen (17-02-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 17-02-06 11:22

Morten Romby skrev:

> Jeg har 4 div-elementer jeg gerne vil have omkranset af link-tag
> med hover-effekt. Div-elementer danner tilsammen en rektangulær
> kasse på 300px(bred) gange 15px(høj). Meningen er så at når musen
> er en vilkårligt sted på kassen, så vises blå baggrund.

Det følgende kan gøre det, men vær opmærksom på at en fast
pixelstørrelse på skriften forhindrer at IE kan skalere teksten:

<style type='text/css'>

..part {
   float: left;
   width: 75px;
   height: 15px;
   background: inherit;
}

a.mlink {
   color: #000080;
   background: green;
   display: block;
   text-decoration: none;
   font-family: verdana, arial, sans-serif;
   font-size: 10px;
   font-weight: normal;
}

a.mlink:hover {
   background: blue;
   color: white;
}

</style>
</head>

<body>
<div>
<a class='mlink'href="http://www.blabla.dk/">
<span class='part'>X</span>
<span class='part'>X</span>
<span class='part'>X</span>
<span class='part'>X</span>
</a>
</div>

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Morten Romby (17-02-2006)
Kommentar
Fra : Morten Romby


Dato : 17-02-06 17:40

Taktak - det virker ganske fortræffeligt i Firefox, men IE vil ikke
vise hover-baggrundsfarven. Er det INHERIT den ikke forstår?

Mine koder ser sådan ud:

<div style="float:left; width:600px; height:18px;">
<a class="mlink2" href="mailto:blabla@mail.djh.dk">

<span class="name"> blabla </span>
<span class="name"> blabla </span>
<span class="name"> blabla </span>
<span class="name"> blabla </span></a></div>


span.name{height:18px;width:150px;float:left;background: inherit;}

a.mlink2:link,a.mlink2:visited,a.mlink2:active{
background: #EDEDE7;display: block;text-decoration: none;
font: 11px arial, sans-serif; color: black; }

a.mlink2:hover {background:red;color:white;}


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (18-02-2006)
Kommentar
Fra : Erik Ginnerskov


Dato : 18-02-06 00:55

Morten Romby wrote:
> Taktak - det virker ganske fortræffeligt i Firefox, men IE vil ikke
> vise hover-baggrundsfarven. Er det INHERIT den ikke forstår?

IE har ikke problemer med inherit. Men vi har problemer med at hjælpe, hvis
du ikke lader os se din side. Læg den ud på nettet og send et link her i
gruppen.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/



Morten Romby (18-02-2006)
Kommentar
Fra : Morten Romby


Dato : 18-02-06 13:00

> IE har ikke problemer med inherit. Men vi har problemer med at hjælpe, hvis
> du ikke lader os se din side. Læg den ud på nettet og send et link her i
> gruppen.

Allright - godt ord igen.

Site: http://www.romby.be/test/test.php
Stylesheet: http://www.romby.be/test/style/generel.css

Som nævnt fungerer hover efter hensigten i Firefox, men ikke i IE.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste