Avatar billede tuplet Nybegynder
02. september 2011 - 14:48 Der er 32 kommentarer og
1 løsning

:hover aktivering af udefrastående element

Jeg ønsker, at en :hover aktivering, skal aktivere en funktion i et andet element. Lad mig give et eksempel:

#box .knap:hover (problem) #box p {
    background:#333;
}

<div id="box">
    <p>Random tekst</p>
    <span class="knap">Link</span>
</div>


Jeg ønsker altså, at når man :hover ".kanp", så sker der noget med "p" - i dette tilfælde ændres baggrunden. Altså at :hover fungerer som en aktivering af et andet element, som ikke er et child af :hover elementet.

Jeg synes at have kigget på alle "selectors", men har ikke fundet noget, der kan løse dette problem.

Nogen bud?
På forhånd tak :)
Avatar billede majbom Novice
02. september 2011 - 18:31 #1
så skal du over i noget javascript - du kan ikke med css
Avatar billede olebole Juniormester
03. september 2011 - 14:25 #2
<ole>

Du kunne skrive noget i stil med:


<script type="text/javascript">
function myHover(elm, bOver) {
    var elmP = elm.parentNode.getElementsByTagName("p")[0];
    elmP.style.background = bOver ? "#333" : "";
}
</script>

<div id="box">
    <p>Random tekst</p>
    <span class="knap"
        onmoueseover="myHover(this, true)"
        onmouseout="myHover(this)">Link</span>
</div>


/mvh
</bole>
Avatar billede niklask Nybegynder
03. september 2011 - 17:20 #3
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $(".knap").mouseover(function() {
      $("p").css("background-color", "#333333");
    });
    $(".knap").mouseout(function() {
      $("p").css("background", "none");
    });
  });
</script>

</head>

<body>

<span class="knap">Link</span>
<p>Random tekst</p>

</body>
Avatar billede tuplet Nybegynder
04. september 2011 - 00:37 #4
Tak for jeres forslag - ville bare gerne holde det til CSSen. Virker fjollet, at man ikke kan gå "tilbage" i strukturen, og påvirke elementer der ligger bagud for et given element. En form for "../" funktion.

Suk - men det kan være det kommer :)

Jeg går med dit svar Niklask.
Avatar billede olebole Juniormester
04. september 2011 - 02:10 #5
Det vil undre mig dybt, hvis det nogensinde bliver implementeret. Faktisk var hover på et tidspunkt meget tæt på at ryge helt ud af CSS  =)

W3C arbejder som bekendt på at få os til at adskille webkode i data (f.eks. XML), opmærkning (HTML), styling og layout (CSS) samt funktionalitet (script).

Da der ved hover strengt taget er tale om funktionalitet, som følge af en brugerhandling, ville script derfor være en mere logisk løsning. Efter lange diskusioner i W3C fik hover dog af hensyn til bagudkompatibilitet lov at blive.
Avatar billede olebole Juniormester
04. september 2011 - 14:48 #6
Det ville være århundredets overraskelse, hvis det skulle blive implementeret. Jeg tvivler på, at W3C lægger deres arbejde helt om  =)
Avatar billede olebole Juniormester
04. september 2011 - 14:50 #7
Hmmmmm ... så kom det indlæg, jegskrev i nat, alligevel frem. Det gjorde det ikke i nat - og heller ikke nu, da jeg kikkede på tråden. Først da jeg havde skrevet #6, kom det frem.

Eksperten.dk = Skodkode!  :o|
Avatar billede majbom Novice
04. september 2011 - 18:03 #8
skodkode?

det kan du da ikke mene ole - du kan jo dårligt nå at klage over en bug, før den er rettet, eller foreslå SMÅ ting som knapper til at formatere tekst før det er implementeret

(ironi og sarkasme KAN være anvendt i ovenstående indlæg)
Avatar billede olebole Juniormester
04. september 2011 - 19:07 #9
- og endda i rå mængder  *D
Avatar billede majbom Novice
04. september 2011 - 19:28 #10
måske - men nogengange undres man godt nok lidt over, at et SÅ aktivt forum kan være SÅ lidt interesserede i at gøre systemet bedre og mere brugbart for ens brugere.

nå, vi kom vist lidt ud på aet sidespor her - beklager #0 :)
Avatar billede olebole Juniormester
04. september 2011 - 19:59 #11
xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh xcfgdfgdfg khj kjhk jhkjh kjhkj hkjhk jhkjhkjh kjh kjh kjhkjh kjh kjhk jhkj hkjh kjhkjh
Avatar billede olebole Juniormester
04. september 2011 - 20:17 #12
Undskyld mit spam ovenfor, men jeg var ligeved at teste noget  =)

Bruger du Explorer, kan du bruge denne bookmarklet til tekstformatering:


<a href='java script:document.getElementById("newreplytext").onkeydown=function(){var c=event.keyCode,s=c==66?"":c==68?"\n[div]
\n":c==73?"":c==85?"":null;if(!s||!event.ctrlKey)return;var r=document.selection.createRange();r.text=s.replace("][","]"+r.text+"[");event.cancelBubble=true;event.returnValue=false;alert(r.text)};void(0)'>FormExp</a>

[/div]
Understøtter: Ctrl+B - Ctrl+I - Ctrl+D - Ctrl+U for Bold - Italic - Blå boks (div) og URL
Avatar billede olebole Juniormester
04. september 2011 - 20:19 #13
Fuck ...!!! Jeg opgiver denne skodkode! SKODKODE
Avatar billede olebole Juniormester
04. september 2011 - 20:20 #14
- og glem endelig mine naive forsøg på at skrive en bookmarklet på dette komplet inkompetent kodede site  :o(
Avatar billede majbom Novice
04. september 2011 - 20:39 #15
haha FFS - det er jo umuligt at arbejde med!

Ole, når du lige har 5min tilovers, kan du så ikke lige kode et alternativ til siden her? det kan sq da ikke tage meget længere at lave noget der er bedre! :D
Avatar billede olebole Juniormester
04. september 2011 - 22:30 #16
Det er ikke mange firmaer, der i den grad pisser sine indholdsleverandører ned ad nakken! Monopoler klæder nu engang kun de aller færreste!

Det skal dog ikke afholde mig fra at viderbringe det lille stykke værktøj  =)

Kopier koden til et tomt dokument og smid dette i en browser. Når du har oprettet en bookmarklet. Når du står på en Eksperten side, klikker du på din bookmarklet, og du kan bruge de nævnte keyboard shortcuts til BB-formatering.

Enjoy  =)
Avatar billede majbom Novice
05. september 2011 - 08:35 #17
øv, en skam det kun virker i IE - SÅ meget mangler jeg det heller ikke :D

men det er stadig en super indsats, for dem som bruger IE.

tror forresten også der kom et surt opstød i den seneste tråd på bloggen (som er flere måneder gammelt)...
Avatar billede olebole Juniormester
05. september 2011 - 15:41 #18
Ny version, som også virker i andre browsere. I andre browsere sætter den dog ikke cursoren korrekt efter formateringen, men det orkede jeg ikke lige at fixe nu  =)

NB: Det er kun selve bookmarklet'en (linket), der er rettet. Jeg glemte desværre den udfoldede kode - og da jeg ikke var logget ind, kan jeg ikke rette i dokumentet  :o|
Avatar billede majbom Novice
05. september 2011 - 21:03 #19
det er satme GO STIL det der ole!
jeg kan hermed bekræfte at det også virker i FF6, jeg har tilføjet <pre> tags (CTRL + Q), da jeg bruger <div><pre></pre></div> rundt om mine kode-eksempler

MANGE TAK!
Avatar billede olebole Juniormester
05. september 2011 - 21:08 #20
Selvtak. Håber, du får glæde af den  =)
Avatar billede majbom Novice
05. september 2011 - 21:12 #21
det gør jeg helt sikkert - til tider gider jeg ikke at omkranse min kode, fordi jeg synes det er træls at skulle skrive det hele hver gang...

har dog lige et spørgsmål:

var r = r = document.selection.createRange();


er det med vilje at der står " r = r ="? (altså 2 gange)

og hvorfor, hvis det er :)
Avatar billede olebole Juniormester
05. september 2011 - 23:29 #22
ehhhh ... jaja, for søren! Det var for at teste, om du var vågen *host-host*  :D

Nej, det var en svipser - sorry. Den er hugget lidt hurtigt af, så dels kunne den sikkert kortes ned og sexes lidt op. Det må blive en anden gang.

Kan du lide at lege med bookmarklets, kan du ligeså godt få koden til en lille quick'n'dirty editor, jeg skrev for nogle år siden. Gem filen med extension .hta
Avatar billede tuplet Nybegynder
06. september 2011 - 23:50 #23
#5 Tak for info ift. CSS og W3C. Tænkte bare, at det ville være en let og brugbar FUNKTION ;)

Ellers godt at se, at I får åbnet op, for det I har på hjertet! :P
Avatar billede tobrukDk Novice
09. september 2011 - 13:36 #24
Jeg skal altså også lige have brugt det ! :) ,
Sende lige et link til Google & firefox :)
Avatar billede olebole Juniormester
09. september 2011 - 20:02 #25
Se indlæg #18  *o)
Avatar billede tobrukDk Novice
10. september 2011 - 09:53 #26
#25 takker mange gerne Ole .. Jeg synes den er mega fed jeg er glad for du vise mig den i skolen :) så er jeg fri for at skrive div tags og b tags osv.. :) Raaaawww det er bare mega lækkert for mig :D
Avatar billede tobrukDk Novice
10. september 2011 - 09:55 #27
Øøvvv det virker ikke google .. :(
Avatar billede majbom Novice
10. september 2011 - 11:16 #28
Firefox FTW ;)
Avatar billede majbom Novice
10. september 2011 - 20:36 #29
#22 - hvad bruger man den til? :s
Avatar billede olebole Juniormester
10. september 2011 - 21:31 #30
Jeg bruger den, når jeg udvikler bookmarlets. Da de skal ligge i én linje, bliver de hurtigt uoverskuelige. Derfor skriver jeg dem i editoren over mange linjer og med pæn indrykning.

Når jeg vil teste, hvad jeg har skrevet, klikker jeg Create. Herved kopieres koden, og kopien foldes sammen til én linje - og der indsættes start og slut på bookmarkletten.

Til sidst kopieres den færdige bookmarklet automatisk til udklipsholderen. Derved kan den let indsættes i adresselinjen på en browser - eller i en href på et link.

Editoren understøtter ind- og udrykning på enkeltlinjer og blokke af linjer TAB og Shift+TAB.

Udover, at den er quick'n'dirty, er der ikke så meget mere at sige om den  =)
Avatar billede majbom Novice
10. september 2011 - 21:44 #31
ahh okay, kunne bare ikke se der skete noget når jeg trykkede på Create (jeg havde regnet med at den rykkede det sammen til én linje) - så jeg troede jeg havde dummet mig, selv om jeg bare copy/pastede :)

snedigt værktøj !
Avatar billede olebole Juniormester
10. september 2011 - 22:02 #32
Tak  =)
Avatar billede majbom Novice
10. september 2011 - 22:07 #33
selv :)
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