Hét vraag- en antwoordplatform van Nederland

Ik wil Met Div:hover gebruiken om een <p> in een andere div te laten zien iemand een idee hoe ?

ok dus ik heb 2 Divs en in de als ik op de 1e div hover wil ik dat er de

in de andere div zichtbaar wordt maar kom niet helemaal uit hoe het nou precies werkt

Toegevoegd na 24 minuten:















Verpakking: per pak (10 stuks)


Verpakking: 500gr, 1 doos, 16 schoten.


Verpakking: 250 grams, 1 doos, 42 schoten.


Verpakking: 500gr, 1 doos, 40 schoten.


Verpakking: 130 gram, 1 doos, 14 schoten.


Verpakking: 162 gram, 1 doos, 324 schoten.




dit is de html zijde van wat ik wil maken dus als ik bijvoorbeeld
hover over de div met id "blinq"
wil ik dat in de div "info"
de paragraph met id "blinqp" wordt weergeven.

Verwijderde gebruiker
11 jaar geleden
1K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (1)

Daarvoor moet je in je css file werken met descendant selectors / child selectors.
Je schrijft dan een soort url of path in je code waarmee de browser kan zien welk element op je pagina je precies bedoelt en wat er bijvoorbeeld moet gebeuren als er over dat element "gehoverd" wordt.
Als ik het ff gauw bekijk komt het geloof ik neer op de volgende code:

#blinq :hover #info p #blinqp{
visibility: visible;
}

Maar je moet dan wel eerst diezelfde paragraph standaard op visbility: hidden; zetten door boven de vorige code eerst zoiets te zetten:

#blinqp{
visibility: hidden;
}

LET OP: je browser leest jouw css script van links naar rechts van boven naar beneden dus als je een element op je site normaal gesproken verborgen wilt houden dan moet je dit eigenlijk altijd aangeven voordat je daar een uitzondering op maakt.

Je kunt overigens ook "display" gebruiken in plaats van "visibility"
Op het moment dat je "display: none;" in je css zegt dan ziet jouw browser dat alsof er op die plek niks is en neemt het dus geen ruimte in, terwijl bij "visibility: hidden;" er wel plaats voor gereserveerd wordt alleen is er op die plek niks te zien... Voor paragraphs die moeten verschijnen is dat soms een betere optie.

Ik voeg nog wat linkjes toe met voorbeelden van hoe child selectors / descendant selectors gebruikt kunnen worden:
http://meyerweb.com/eric/css/edge/popups/demo.html
http://learn.shayhowe.com/advanced-html-css/complex-selectors

Heel veel succes! En als je er niet uit komt heb ik misschien morgen nog wel tijd om even te kijken of alles wel klopt in je code.

Toegevoegd na 2 dagen:
Hmmm... ik heb nog even zitten kijken nu, en om het op de manier te doen die ik voorstelde zou je de structuur van je html een beetje moeten aanpassen als dat mogelijk is. Ik hou er zelf heel erg van om zoveel mogelijk alleen html en css te gebruiken dus persoonlijk zou ik dat zeker doen als er andere dingen zijn waa rekening hoeft te houden...

Op dit moment heb je ervoor gekozen om van een heleboel artikelen één enkele pagina te maken maar daar steeds maar een gedeelte van te laten zien. Dat is op zich geen probleem. Alleen heb je nu je info volledig gescheiden van je artikelen in twee verschillende div's.
Stel dat je het zo zou doen:

http://jsfiddle.net/DavidBartenstein/cwPnq/1/embedded/result/
(Lees meer...)
Verwijderde gebruiker
11 jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding