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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  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 : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408929
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.