Avatar billede reddevil Nybegynder
20. maj 2010 - 00:21 Der er 1 kommentar

Mouseover for nested div tags

Hej.

Jeg har et lidt specielt problem.
HTML tillader ikke nested a-tags, så jeg forsøger at lave noget ligende med div, men indtil videre uden held.

Tag følgende eksempel

<div>123 <div>456</div> 789</div>

Jeg vil gerne opnå følgende effekt:
- Når jeg kører cursoren over 123 så bliver både 123 og 789 understreget, men ikke 456.
- Når jeg kører cursoren over 456 så bliver 456 understreget, men ikke 123 og 789.


Jeg har forsøgt med noget CSS, hover-tags og onmouseover, men det er ikke lykkedes mig endnu.
Løsningen behøves ikke nødvendigvis være med div-tags.
Avatar billede olebole Juniormester
20. maj 2010 - 09:39 #1
<ole>

Det kan du ikke løse med CSS alene. Du bliver nødt til også at bruge java script:


<style type="text/css">
a,
a:visited {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
span {
    cursor: pointer;
}
</style>
<script type="text/javascript">
function underLine() {
    for (var i=0,j=arguments.length; i<j; i++) document.getElementById(arguments[i]).style.textDecoration = "underline";
}
function cancelUnderLine() {
    for (var i=0,j=arguments.length; i<j; i++) document.getElementById(arguments[i]).style.textDecoration = "none";
}
</script>

<span id="foo" onmouseover="underLine('foo','fooBar')" onmouseout="cancelUnderLine('foo','fooBar')">123</span>
<a href="#">456</a>
<span id="fooBar" onmouseover="underLine('foo','fooBar')" onmouseout="cancelUnderLine('foo','fooBar')">789</span>


/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester