CSS script Mouse Hoover vraag.

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
Marconist
Berichten: 2
Lid geworden op: ma 26 jul 2021, 15:43

CSS script Mouse Hoover vraag.

Bericht door Marconist »

Ik heb nog weinig ervaring met CSS.
In mijn concept Website werkt het Mouseover niet goed.

Ergens vond ik een vrij korte mogelijkheid omdat met Hoover te doen.
Alhoewel het moet werken, doet het dat niet.
De PNG plaatjes staan netjes in de map waarnaar verwezen wordt en
ik zie ook in de editor dat de images herkend worden.
Jammer genoeg zie ik geen fout weergave en ook geen voorvertoning.
Ik hoop dat iemand mij kan helpen bij het vinden van de fout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 130px;
height: 195px;
background: url("E:\hoover\button 1a.png") no-repeat;
margin: 50px;
}
.card:hover {
background: url("E:\hoover\button 1b.png") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: CSS script Mouse Hoover vraag.

Bericht door Goeroeboeroe »

Hallo,
Eigenlijk is dit forum bedoeld voor vragen over de voorbeelden op deze site. Dat is verder geen enkel probleem, alleen kan het wat langer duren voor je 'n reactie krijgt dan op drukkere forums als helpmij.nl. Bovendien ben ik feitelijk de enige die hier vragen beantwoord (de voorbeelden zijn ook van mij), en sommige mensen vinden het prettiger als er meer mensen meekijken. Als ik dan 'n fout maak, ziet iemand anders dat allicht.
Goed, dat gezegd hebbend.

Er lopen 'n paar dingen door elkaar heen in je vraag. Verder geen probleem, maar omdat 'n computer heel zwart-wit is, is duidelijkheid soms handig.
'mouseover' is een begrip uit JavaScript: een reactie als je met de muis (of de vinger, of ...) ergens overheen gaat.
:hover is 'n begrip uit css.
Op touchscreens kan :hover tot grote problemen leiden. Touchscreens zijn inmiddels ruim meer dan de helft van de gebruikte apparaten, dus dat is niet onbelangrijk. Op een touchscreen werkt :hover ongeveer hetzelfde als een klik op de desktop of een aanraking op een touchscreen. Maar na aanraken/klikken blijft :hover werken. Op Android en Windows en OS X stopt de werking weer, als je ergens buiten het element met :hover (bij jou de <div>) klikt/aanraakt. Maar op iOS (iPad, iPhone) is dat niet het geval: daar moet je speciale voorzieningen treffen om - in jouw geval - de afbeelding weer te laten verdwijnen.
Mocht je daar vragen over hebben, dan horen we die wel.

Goed, je vraag.
Je schrijft dat 'het niet goed werkt', maar dat is hartstikke vaag. Blijft die afbeelding steeds zichtbaar, of juist niet?

Het eerste stukje van je css:

Code: Selecteer alles

.card {
width: 130px;Relatieve paden in url
height: 195px;
background: url("E:\hoover\button 1a.png") no-repeat;
margin: 50px;
}
(Mogelijk weet je sommige dingen al, maar dat weet ik natuurlijk niet, dus mogelijk is dit iets te uitgebreid.)
Deze code is correct. Althans: Een achtergrond-afbeelding heeft van zichzelf geen hoogte of breedte, hij wordt even groot als het element waar ze in staat. Hier dus 130 px breed en 195 px hoog. Dat is prima.
Maar je geeft gelijk die afbeelding op met background: url(" ... enz. Oftewel: die afbeelding zal altijd worden getoond. Als je hem alleen bij hoveren wilt tonen, moet je hier die hele regel met background weghalen. Standaard is een achtergrond doorzichtig, dus als je niets opgeeft, is die hele <div> gewoon onzichtbaar (hij neemt wel ruimte in: de opgegeven breedte en hoogte).

Als je nu over de <div> hovert met de muis, gaat de regel bij .card:hover werken: de achtergrondafbeelding zal nu wel zichtbaar worden.

Dus nu heb je geen afbeelding, tot je over de <div> hovert (of die op een touchscreen aanraakt).

(Als je het juist omgekeerd wilt, laat je de afbeelding bij .card gewoon staan. Die is dan altijd zichtbaar. Bij .card:hover geef je dan op

Code: Selecteer alles

.card:hover {
background: transparent;
}
Nu verdwijnt de afbeelding juist als je over de <div> hovert.

Nog even iets anders wat me opvalt: die url van de afbeelding heeft een wat eigenaardig adres. Ik neem aan dat het om een lokale harddisk gaat of zo.
Beter is om de afbeeldingen (en de bestanden met html, css, javascript, ...) allemaal in dezelfde map te zetten, opgedeeld in ondermappen, onderondermappen, enz. Als je het dan op internet zet, hoef je geen urls te veranderen.
Zoiets dus:
  • site (map)
    index.html (hoofd-pagina)
    images (submap met afbeeldingen)
    css (submap met css)
Enz.
Je kunt dan vanuit het bestand index.html volstaan met background: url(images\plaatje.jpg);
Dan hoef je dat nooit aan te passen, ook niet als je het in 'n andere computer of op internet bekijkt.

Misschien 'n wat lang antwoord, maar dat is dan weer 'n voordeel boven helpmij.nl e.d. Omdat hier weinig vragen komen, is het altijd leuk als er weer 'ns eentje langskomt.
Als je nog vragen hebt, komen ze wel.
Succes!
Marconist
Berichten: 2
Lid geworden op: ma 26 jul 2021, 15:43

Re: CSS script Mouse Hoover vraag.

Bericht door Marconist »

Heel erg bedankt voor je uitvoerige toelichting.
Weer wat geleerd en het Hoover moet ik maar snel vergeten. Toch weer terug naar MouseOver denk ik. Vooral de smarthphones geven de doorslag.
Nogmaals dank.
Plaats reactie