CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Slettet bruger

29. oktober 2011 - 22:59 Der er 9 kommentarer og
1 løsning

Fade et bestemt tag uden ID

Hej folkens

Jeg skal bruge et javascript, der fader tekstens farve i det næste tag. Koden skal se sådan ud:

<nav>
<a href"x" onmouseover="fade()">
<h3>Tekst der skal fades</h3>
<p>Tekst der ikke skal fades</p>
</a>
<a href"y" onmouseover="fade()">
<h3>Tekst der skal fades</h3>
<p>Tekst der ikke skal fades</p>
</a>
</nav>

hvor funktionen fade skal fade tekstfarven i det næste tag i koden.

Altså, hvis jeg har musen over det første link (x), skal det første h3 tag fade tekstfarven

Kan det gøres på en simpel måde ?

Håber i forstår spørgsmålet og kan hjælpe

På forhånd tak :)

Synes godt om

olebole Juniormester

30. oktober 2011 - 03:47 #1

<ole>

Du skal nok lave en anden konstruktion. Et A element er et inline element - og kan derfor hverken indeholde H eller P elementer. I princippet kan du lave noget i stil med:


<script type="text/javascript">
function fadeNext(elm, sTag) {
    while (elm.nodeName.toLowerCase()!=sTag.toLowerCase()) {
        return arguments.callee(elm.nextSibling, sTag);
    }
    var nVal = 100;
    setInterval(function(){doFade(elm,nVal-=10)}, 40);
}
function doFade(elm, nVal) {
    var css = elm.style;
    css.filter = "alpha(opacity="+nVal+")";
}
</script>

<div style="padding:100px">
    <p onmouseover="fadeNext(this, 'h3')">Fade overskriften nedenfor</p>
    <h3>TESTING</h3>
</div>

/mvh
</bole>

Synes godt om

olebole Juniormester

30. oktober 2011 - 03:52 #2

Sorry, jeg glemte da en masse =)


function doFade(elm, nVal) {
    var css = elm.style;
    css.filter = "alpha(opacity="+nVal+")";
    nVal /= 100;
    css.khtmlOpacity  = nVal;
    css.mozOpacity = nVal;
    css.opacity = nVal;
}

Synes godt om

olebole Juniormester

30. oktober 2011 - 03:56 #3

Godnat, Ole! :D


<script type="text/javascript">
function fadeNext(elm, sTag) {
    while (elm.nodeName.toLowerCase()!=sTag.toLowerCase()) {
        elm = elm.nextSibling;
    }
    var nVal = 100;
    setInterval(function(){doFade(elm,nVal-=10)}, 40);
}
function doFade(elm, nVal) {
    var css = elm.style;
    css.filter = "alpha(opacity="+nVal+")";
    nVal /= 100;
    css.khtmlOpacity  = nVal;
    css.mozOpacity = nVal;
    css.opacity = nVal;
}
</script>

<div style="padding:100px">
    <p onmouseover="fadeNext(this, 'h3')">Fade overskriften nedenfor</p>
    <h3>TESTING</h3>
</div>

Synes godt om

JensPeterSvensson Nybegynder

30. oktober 2011 - 09:21 #4

Udfra det han skriver tro jeg faktisk det skal se sådan her ud:


function fadeNext(elm, sTag) {
    elm = elm.firstChild;
    while (elm.nodeName.toLowerCase()!=sTag.toLowerCase()) {
        elm = elm.nextSibling;
    }
    var nVal = 100;
    setInterval(function(){doFade(elm,nVal-=10)}, 40);
}

Synes godt om

olebole Juniormester

30. oktober 2011 - 14:19 #5

Ja, men det skal jo netop heller ikke foregå, som spørgeren skriver =)

Synes godt om

Slettet bruger

31. oktober 2011 - 00:52 #6

Tak for jeres svar begge to.
Jeg har sat a elementerne til display: block; så det burde virke som en div.
Oles forslag virker. Men jeg kan ikke få det til at virke, hvis jeg har, i dette tilfælde, p rapped om h3 elementet?

Synes godt om

Thomas_E Nybegynder

03. november 2011 - 10:59 #7

Jeg vil anbefalde at du bruger jquery så kan du ved at give din elementer en class gøre dette super nemt:

eks.

<a href"x" class="DoFade">
<h3>Tekst der skal fades</h3>
<p>Tekst der ikke skal fades</p>
</a>

<script>

$('.DoFade').mouseover(function(){

$(this).children(":first").fadeIn();

});

$('.DoFade').mouseout(function(){

$(this).children(":first").fadeOut();

});

</script>

Synes godt om

Slettet bruger

03. november 2011 - 16:20 #8

Tak for forslaget, det vil jeg prøve :)

Synes godt om

Slettet bruger

28. november 2011 - 16:19 #9

Thomas_E: Jeg har ikke haft tid til at prøve dit forslag af, men læg et svar, så for du pointene.
Beklager at jeg ikke har svaret før..

Synes godt om

Slettet bruger

28. december 2011 - 10:05 #10

Svar

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS