CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede NielsErikP Mester
24. februar 2013 - 13:57 Der er 19 kommentarer og
1 løsning

Referer til før liggende <tag>...

Hej...

Jeg har en <ul> som har en id .. der sætter runde hjørner på borderen.
Mit problem er at jeg gerne vil referer til denne <ul> , når jeg "hover" et underliggende <li> i min Css, sådan at der kan sættes en lige border på ved "hover .

Er der nogen der har en ide om, hvorledes dette kan praktiseres?? Hvis det kan lade sig gøre! 

På forhånd tak.
Avatar billede jakobdo Ekspert
24. februar 2013 - 14:40 #1
Tror ikke du kan lave det med ren css.
Men du skal nok ud et noget jquery eller lign. (hvor det i hvert fald nemt kan fikses)
Avatar billede olebole Juniormester
24. februar 2013 - 14:58 #2
<ole>

Som Jakob skriver, så kan det ikke lade sig gøre at lade elementer/klasser være bestemmende 'opad'. Formodentlig fordi det ville blive alt for komplekst at give enkeltelementer mulighed for at være bestemmende/ændrende både op og ned i hierakiet.

Enten må du ændre strukturen eller bruge script  =)

/mvh
</bole>
Avatar billede NielsErikP Mester
24. februar 2013 - 15:39 #3
Hej..

Nej.. jeg tænkte det nok.. men måske noget var gået forbi min nysgerrighed :-)

@jakobdo: Min erfaring med JQuery er at lortet virker en måneds tid.. og så er kaput.
Har du evt. noget link værk til noget der funger??
Avatar billede olebole Juniormester
24. februar 2013 - 15:44 #4
To oplagte muligheder: parent og closest
Avatar billede NielsErikP Mester
24. februar 2013 - 15:54 #5
Hej...

Dem kigger jeg lige på... og vender så tilbage :-)
Avatar billede jakobdo Ekspert
24. februar 2013 - 16:11 #6
Utestet:

$("li").hover(
  function () {
    $(this).parent().addClass("DIN UL HOVERCLASS");
  },
  function () {
    $(this).parent().removeClass("DIN UL HOVERCLASS");
  }
);
Avatar billede NielsErikP Mester
24. februar 2013 - 22:25 #7
Hej...

@olebole: din "javascript " haj.. hvis man ikke vil være afhængig JQuery's motor.. og hele tiden udskifte sin "src=" ..
Er der så muligheder inden for javascript ?? Har du evt. nogle links til en javascript løsning af mit problem??
Avatar billede olebole Juniormester
24. februar 2013 - 23:58 #8
Nu er jeg - i modsætning til, hvad mange tror - ikke religiøs modstander af jQuery. Det giver dog rigtig god mening at lære JS godt at kende, så man kan bruge jQuery i sin kode, der hvor det giver bedst mening  =)

Et bud kunne være noget i denne stil:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
}
ul {
    width: 100px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid red;
    background: yellow;
    cursor: default;
}
li ul {
    margin-left: 20px;
}
li {
    margin: 4px;
    background: #ededed;
}
</style>
<script type="text/javascript">
var active = null;
function closestUL(elmUL, elm) {
    if (elm.nodeName.toLowerCase()==="ul") return false;
    for (var elmPar; elm&&elm!==elmUL; elm=elmPar) {
        elmPar = elm.parentNode;
        if (elmPar.nodeName.toLowerCase()==="ul") {
            return {li:elm, ul:elmPar};
        }
    }
}
function mOver(elmUL, evt, out) {
    var oSrc = closestUL(elmUL, evt.target||evt.srcElement);
    if (!oSrc) return;
    if (active) {
        active.li.style.background = "";
        active.ul.style.borderColor = "";
    }
    if (out) return;
    active = {li:oSrc.li, ul:oSrc.ul};
    active.li.style.background = "green";
    active.ul.style.borderColor = "blue";
}
</script>
</head>
<body>

<ul onmouseover="mOver(this, event)" onmouseout="mOver(this, event, true)">
    <li>Emne #1.0.0</li>
    <li>Emne #2.0.0</li>
    <li>Emne #3.0.0
        <ul>
            <li>Emne <b>#3.1.0</b></li>
            <li>Emne <b>#3.2.0</b></li>
            <li>Emne <b>#3.3.0</b>
                <ul>
                    <li>Emne <i><b>#3.3.1</b></i></li>
                    <li>Emne <i><b>#3.3.2</b></i></li>
                    <li>Emne <i><b>#3.3.3</b></i></li>
                    <li>Emne <i><b>#3.3.4</b></i></li>
                </ul></li>
            <li>Emne <b>#3.4.0</b></li>
            <li>Emne <b>#3.5.0</b></li>
        </ul></li>
    <li>Emne #4.0.0</li>
    <li>Emne #5.0.0</li>
    <li>Emne #6.0.0</li>
</ul>

</body>
</html>

- og du kan naturligvis sætte className på UL-elementet i stedet for at sætte elementernes baggrunds- og kantfarve.

Under alle omstændigheder, har du begge elementer til rådighed, dersom du ønsker at gøre andet ved dem  =)
Avatar billede olebole Juniormester
25. februar 2013 - 00:10 #9
PS: Hvis du undrer dig over den lidt 'uortodokse' for-løkke, så kommer her en forklaring: En for-løkke har tre udtryk i sin parentes:

for (1; 2; 3) {

}

1) Udføres én gang, før første gennemløb begynder

2) Løkken kører, sålænge denne betingelse er opfyldt

3) Udføres efter hvert gennemløb - lige inden slut-klammen

    for (var elmPar; elm&&elm!==elmUL; elm=elmPar) {
        elmPar = elm.parentNode;
        if (elmPar.nodeName.toLowerCase()==="ul") {
            return {li:elm, ul:elmPar};
        }
    }

- kunne altså også være skrevet sådan:

    var elmPar;
    while (elm && elm!==elmUL) {
        elmPar = elm.parentNode;
        if (elmPar.nodeName.toLowerCase()==="ul") {
            return {li:elm, ul:elmPar};
        }
        elm = elmPar;
    }

Nogen kan lide datteren - andre fortrækker moderen  =)
Avatar billede NielsErikP Mester
25. februar 2013 - 22:30 #10
Hej...

ole det er flot det du har frembrungen i #8... Og rart at se lidt løkker i funktion i #9.

Men jeg ved ikke om jeg har forklaret mit problem forkert?
Jeg har denne kode :


  <ul id="rund_ul">
    <li id="s1">
    <li>
    <li>
    <li>
    ......
  </ul>



Det jeg ønsker er at, når jeg ":hover" over "listItem'et" med id="s1" .. Så skal jeg kunne sætte en "BorderLeft" på den <ul> med id="rund_ul ...
Kan dette mon lade sig gøre før om et halvt års tid ;-)
Avatar billede jakobdo Ekspert
26. februar 2013 - 08:35 #11
NielsErikP: Har du forsøgt dig med noget af det kode som OleBole har lavet til dig?
Alternativt startet med at få jquery eksemplet til at virke?
Eller er du typen som bare vil have vi skal lave den fulde kode til dig, som du så kan copy/paste ind i din kode og sige: SE HVAD JEG HAR LAVET! :o)
Avatar billede olebole Juniormester
26. februar 2013 - 16:23 #12
NielsErikP: Det kan ikke lade sig gøre med CSS, alene - og det bliver nok ikke muligt de første par år. Begge de løsninger Jakob og jeg har lavet, gør det derimod med en kombi af JS og CSS
Avatar billede NielsErikP Mester
26. februar 2013 - 21:27 #13
Hej...

Undskyld det sene svar!!

@jakobdo: Ja.. jeg har copy/pastet ole eksempel i #8.. for at se hvad der sker.. jeg fik en tre-leddet menu struktur, hvor ole leger med at sætte en grøn hover bagrundsfarve.. Den kan jeg ikke lige greje, da min javascript kendskab er på begynder niveau... = ZERO. Så jeg har ikke den store erfaring i at skulle lave de små ændringer i ole's kode der frembringer resultatet.
Og ja.. jeg vil gerne kunne sige "SE HVAD JEG HAR LAVET", hvis jeg da selv har lavet det... ellers er jeg en der gerne vil lære.

@olebole: .. nej, den har jeg forstået... Da også satans jeg ikke lige kan "tyde" den js kode linje for linje i #8.. for jeg tvivler ikke på det er vejen til det. Du skal jo ligesom også først lære alfabetet før du kan skrive en tekst.. der nytter det jo heller ikke bare at se folk skrive det.
Avatar billede NielsErikP Mester
11. marts 2013 - 00:20 #14
Hej...

Arbejder stadig på sagen... Hørte en sige man skulle styre Javascript,DOM inden man kastede sig ud i JQuery..

Vender tilbage.
Avatar billede NielsErikP Mester
26. marts 2013 - 00:53 #15
Hej..

Kom ikke rigtigt videre med dette JQuery...
Ole jeg regner ikke med du vil have point..??

Så jakobdo... vil du venligst smide et svar.
Avatar billede olebole Juniormester
26. marts 2013 - 01:06 #16
- du regner ret godt  *o)
Avatar billede NielsErikP Mester
26. marts 2013 - 13:17 #17
Hej...

Ja.. syntes du ikke ;-)
Avatar billede jakobdo Ekspert
05. april 2013 - 10:08 #18
Svar!
Avatar billede jakobdo Ekspert
06. april 2013 - 21:32 #19
Takker for point.
Avatar billede NielsErikP Mester
06. april 2013 - 21:53 #20
Hej..

Ja.. og tak for hjælpen, jakobdo...Selvom jeg ikke kom så langt med dette projekt.. Man kan jo ikke sætte sig ind i det hele på engang :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:58 Netværk bliver ved med at "hoppe af" når jeg åbner for mange faner eller specifike spil Af Lars i LAN/WAN
I går 14:44 MS Outlook Af lbc i Office & Kontorpakker
19/0917:14 Udvid partition - Mulighed er nedtonet, ikke aktiv Af Uvanga i PC
19/0915:10 Debian og Windows Af DanishBear i Windows
19/0911:21 CHKDSK C: /r FEJL Af barth i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Professor Christian Damsgaard: Her er de tre vigtigste sikkerhedsmæssige udfordringer ved at lægge dine data i clouden
Læs mere »
Her er Danmarks kommende AI-lov: Se det fulde lov-udkast fra regeringen
Microsoft vil træne AI på dine LinkedIn-opslag og kommentarer: Sådan undgår du det
Henrik Bodskov om sin exit fra Aeven: “Da jeg kørte ind på parkeringspladsen, løb tårerne lidt ned ad kinden”
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Microsoft tvangsinstallerer app i din Office 365 i næste måned: Du kan ikke slippe
Apple opdager alvorlig sårbarhed i ældre iPhones og iPads
Se alle »
CIO
Teaser billede
Til kamp mod legacy og teknisk gæld: Uffe har skrottet 200 servere og 1.000 routere og switches på 140 lokationer
Læs mere »
Microsoft opsplitter Office og Teams: Sådan fungerer opdelingen
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Overgangen til Windows 11 kan udløse store bøder, hvis du ikke passer på
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Sådan samler du virtualisering og containerdrift i én løsning
Læs mere »
Sikre og skalerbare datacentre med fokus på drift, energi og fremtid
Er I klar til at tage næste skridt på den digitale retailrejse?
Cybersikkerhed 2025: Er din branche blandt de mest udsatte?
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »