Antworten auf deine Fragen:
Neues Thema erstellen

CSS hover effekt funktioniert nicht richtig

buyas

Nicht mehr ganz neu hier

moin !

habe folgendes problem, welches mich grad in den wahnsinn treibt, da ich es einfach nicht hinbekomme den fehler zu finden.
habe nen hover - effekt gestaltet bei dem ein zusätzliches div sichtbar wird ( -> visibility: von hidden nach visible ).
es funktioniert an sich auch, allerdings, wenn man mit der maus im dann neu " geöffneten " div weiter runter fährt, verschwindet dieses div dann wieder bevor man mit der maus bis ans untere ende des divs angelangt ist, so in etwa der halben höhe des divs.

Code:
.paeenoff{visibility:hidden}
.paeenon:hover .paeenoff{visibility:visible}


Code:
<div style="position:absolute; width:130px; height:400px; top:200px; left:13px; background: transparent; z-index:30" class="paeenon">

<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">

<a href="" style="text-decoration:none;text-align:left"><b style="">&nbsp;&Aumlngste und Phobien</b></a>
</p>

<div style="position:absolute; width:400px; height:400px; top:35px; left:0px; background: #faedfa;" class="paeenoff">
<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
<b>&Aumlngste und Phobien</b>
<br><br>
Um eine Hypnosetherapie bei &Aumlngsten, Zw&aumlngen und Phobien erfolgreich durchf&uumlhren zu k&oumlnnen, muss die zugrundeliegende Angstst&oumlrung vorab genau klassifiziert und auf Behandelbarkeit mit Hypnose gepr&uumlft werden. 
<br><br>
Durch die Medien ist die Hypnosetherapie mittlerweile als erfolgreiche und wirkungsstarke Therapiemethode bei der Behandlung von &Aumlngsten und Phobien bekannt. 
<br><br>
Bei der Behandlung spezifischer Phobien wie der Flugangst oder der Spinnen-Phobie kann sie schon als bew&aumlhrter Klassiker bezeichnet werden, aber aufgrund ihrer wachsenden Popularit&aumlt findet sie auch immer mehr Beachtung bei der Behandlung generalisierter Angstst&oumlrungen, Panikattacken und weiterer komplexerer Angsterkrankungen. 
</b> 
</p>
</div>
</div>

hat jemand vllt des rätsels lösung für mich ?
 

AW: CSS hover effekt funktioniert nicht richtig

Kannst du dein Problem genauer erörtern? Bei mir funktioniert es einwandfrei in Opera und Chrome, wenn ich deinen Code auf jsfiddle.net einfüge.
 
AW: CSS hover effekt funktioniert nicht richtig

naja, wenn man mit der maus über "ängste und phobien" fährt, also auf des parental div, dann öffnet sich das 2. div ordnungsgemäß, allerdings kann man mit der maus nicht komplett über dieses 2. div fahren, sobald man nen bestimmten punkt ( in der höhe des divs ) überschreitet nach unten hin, verschwindet das div wieder.
man kann z.b. dadurch nicht den kompletten text markieren ( markierung ziehen ) und kopieren, da das div auf einmal verschwindet ..
ich hoffe, ich konnte einigermaßen erklären, was das problem ist.
habe es übrigens selbst bisher nur mit mozilla und IE ausprobiert.
 
AW: CSS hover effekt funktioniert nicht richtig

Auch im aktuellen Firefox (den meinst du wohl mit Mozilla) und im IE10 habe ich dieses Problem nicht. Ich kann ohne Probleme den angezeigten Text markieren.
Stelle bitte ein Beispiel zur Verfügung, welches man nachvollziehen kann. Alternativ stelle den Code so zur Verfügung, dass man ihn auf jsfiddle.net einfügen und das Problem nachvollziehen kann. So kann ich dir leider nicht wirklich helfen ;)
 
AW: CSS hover effekt funktioniert nicht richtig

Ich meine eine Code, mit dem man dein Problem nachvollziehen kann. Füge einmal den von dir geposteten Code auf ein, dann siehst du, dass es sehr wohl funktioniert. Kannst du den Code auf ein Minimum beschränken, dann erleichtert das die Fehlersuche, ist dir das jedoch nicht möglich, ist der komplette Code auch in Ordnung.
 
AW: CSS hover effekt funktioniert nicht richtig

sorry, dass ich teilweise ziemlich zeitverzögert reagiere, mache das ganze nebenbei neben der arbeit...

PHP:
<?php
echo '<div id="displayneveshte" class="linkhaverdo">
<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px; font-weight:bold; font-style:italic;" class="poemcolor">
 
„Achte auf Deine Gewohnheiten, denn sie werden Dein Charakter.“
</p>
<br><br>
 
<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px; font-weight:lighter;">
                                                                                                    <br><br>
<br>
<a href="achtsamkeit.php" style="text-decoration:none"><b style="">Achtsamkeit</b></a>
 
<br><br>
<a href="hypnose.php" style="text-decoration:none"><b style="">Hypnose</b></a>
<br><br>   
</b></p>
 
<div style="position:absolute; width:130px; height:40px; top:200px; left:13px; background: transparent; z-index:29" class="">
<div style="position:absolute; width:130px; height:400px; top:0px; left:13px; background: transparent; z-index:30" class="paeenon">
 
<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
 
<a href="" style="text-decoration:none;text-align:left"><b style="">&nbsp;&Aumlngste und Phobien</b></a>
</p>
 
<div style="position:absolute; width:400px; height:400px; top:35px; left:0px; background: #faedfa;" class="paeenoff">
<p style="position:absolute; top:3.2%; left: 2.6%; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
<b>&Aumlngste und Phobien</b>
<br><br>
Um eine Hypnosetherapie bei &Aumlngsten, Zw&aumlngen und Phobien erfolgreich durchf&uumlhren zu k&oumlnnen, muss die zugrundeliegende Angstst&oumlrung vorab genau klassifiziert und auf Behandelbarkeit mit Hypnose gepr&uumlft werden. 
<br><br>
Durch die Medien ist die Hypnosetherapie mittlerweile als erfolgreiche und wirkungsstarke Therapiemethode bei der Behandlung von &Aumlngsten und Phobien bekannt. 
<br><br>
Bei der Behandlung spezifischer Phobien wie der Flugangst oder der Spinnen-Phobie kann sie schon als bew&aumlhrter Klassiker bezeichnet werden, aber aufgrund ihrer wachsenden Popularit&aumlt findet sie auch immer mehr Beachtung bei der Behandlung generalisierter Angstst&oumlrungen, Panikattacken und weiterer komplexerer Angsterkrankungen. 
</b> 
</p>
</div>
</div>
</div>
<div style="position:absolute; width:80px; height:400px; top:267px;left:30px; background: transparent; z-index:29" class="paeenon">
 
<p style="position:absolute; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
 
<a href="#" style="text-decoration:none;text-align:left"><b style="">Pr&uumlfungsangst</b></a>
<div style="position:absolute; width:400px; height:400px; top:25px;left:0px; background: #faedfa;" class="paeenoff">
<b>Pr&uumlfungsangst / Pr&uumlfungsvorbereitung</b>
<br><br>
Eine leichte Nervosit&aumlt vor einer Pr&uumlfung kann die Denkleistung erh&oumlhen und dem Pr&uumlfling damit das Bestehen sichern. 
<br><br>
Nimmt die Nervosit&aumlt allerdings &Uumlberhand, verschlechtert sich die Denkleistung zunehmend und kann bis hin zum v&oumllligen Blackout f&uumlhren. 
<br><br>
Die Zielgruppe für diese Anwendung ist recht breit. Sch&uumller, Studenten, aber auch im Beruf stehende Erwachsene, die sich weiterbilden m&oumlchten, suchen oft nach Unterst&uumltzung beim Lernen oder bei der Pr&uumlfungsvorbereitung. Hypnose ist eine sehr attraktive Unterst&uumltzung, da sie keines weiteren Trainings bedarf, um ihre Wirkung entfalten zu k&oumlnnen, andererseits aber problemlos in bestehende Lerntechniken und -systeme integrierbar ist.
</b> 
</p>
</div>
</div>
 
<div style="position:absolute; width:80px; height:400px; top:372px;left:20px; background: transparent; z-index:28" class="paeenon">
 
<p style="position:absolute; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
 
<a href="#" style="text-decoration:none;text-align:left"><b style="">Schmerzen</b></a>
<div style="position:absolute; width:400px; height:400px; top:25px;left:0px; background: #faedfa;" class="paeenoff">
<b>Schmerzen</b>
<br><br>
Aufgrund ihrer unkomplizierten und nebenwirkungsfreien Einsatzweise wird die Hypnose in der Schmerztherapie zunehmend beliebter. 
<br><br>
Deshalb wenden sich auch immer mehr Schmerzpatienten auf der Suche nach einer wirksamen Unterst&uumltzung an Hypnosetherapeuten. Gerade Schmerzpatienten, bei denen klassische schmerztherapeutische Ans&aumltze nicht oder nicht mehr helfen, finden in der Hypnose h&aumlufig eine effiziente und zudem auch leicht handhabbare L&oumlsung, die sich in nahezu jeder medizinischen Konstellation einsetzen l&aumlsst. 
</b> 
</p>
</div>
</div>
 
<div style="position:absolute; width:80px; height:400px; top:402px;left:31px; background: transparent; z-index:27" class="paeenon">
 
<p style="position:absolute; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
 
<a href="#" style="text-decoration:none;text-align:left"><b style="">Migr&aumlne</b></a>
<div style="position:absolute; width:400px; height:400px; top:25px;left:0px; background: #faedfa;" class="paeenoff">
<b>Migr&aumlne</b>
<br><br>
Die Behandlung von Migr&aumlne ist in der Hypnosetherapie ein weites Gebiet. Migr&aumlne l&aumlsst sich oftmals nicht abschalten wie jeder andere Schmerz. Für die Behandlung von Migr&aumlne m&uumlssen teilweise eigene Strategien entwickelt werden, die vom Typ der Migr&aumlne und der individuellen Reaktion des Klienten abh&aumlngig sind. 
<br><br>
Es existiert eine Vielzahl von Erfahrungswerten aus der Behandlung von Migr&aumlnepatienten mittels Hypnose. Beim &uumlberwiegenden Teil der Klienten hat sich gezeigt, dass ein maximaler Wirkungsgrad durch eine kontinuierliche Hypnose-Behandlung zu erzielen ist. 
</b> 
</p>
</div>
</div>
 
<p style="position:absolute; top:17.2%; left: 2.6%; width:320px; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
<br><br>
<b>
Medizinische Hypnosetherapie
<br><br>
</b>
<br><br>
* Flugangst
<br>
* Redeangst
<br>
*
<br>
* Soziale Phobie
<br>
* Zahnarztphobie
<br>
* Angstst&oumlrungen
<br>
* Spezifische Phobien
<br><br>
<br><br>
* 
<br>
* Fibromyalgie
<br>
* Spannungskopfschmerz
<br>
* Chronisches Schmerzsyndrom
<br><br>
</b></p>
<p style="position:absolute; top:22.2%; left: 410px; width:320px; font-family: Arial, Helvetica, sans-serif; font-size : 15.2px;">
<b>
Weitere Erkrankugnen
</b>
<br><br>
* Asthma
<br>
* Burnout
<br>
* Allergien
<br>
* Essst&oumlrungen
<br>
* Schlafst&oumlrugnen
<br>
* Reizdarmsyndrom
<br>
* Rauchentw&oumlnung
<br>
* Gewichtsreduktion
<br><br>
<b>
Seele
</b>
<br><br>
* Burnout
<br>
* Z&aumlhneknirschen
<br>
* Blockadenl&oumlsung
<br>
* Stressreduzierung
</p>
</div>';
?>

habe den code mal nicht reduziert, da vllt einfach irgendwo anders der fehler liegt, wo ich ihn übersehe ..
 
AW: CSS hover effekt funktioniert nicht richtig

Dein Problem sind die absolute Positionierungen. Auch ist dein erzeugter HTML Code semantisch unbrauchbar, da solltest du zuerst anfangen.
Die absolute Positionierung positioniert deine "Prüfungsangst" über dem Overlay von "Ängste und Phobien" und sobald du mit der Maus über "Ängste und Phobien" fährst, erscheint natürlich das Overlay davon.
Meine Empfehlung: Schreibe den kompletten HTML Code neu. Das klingt jetzt hart und nach viel Arbeit, aber so wie es jetzt ist, kann man da nicht viel damit anfangen. Setze dich mit der Semantik von HTML auseinander, sprich du sollst Listen verwenden, wenn du eine Aufzählung machst (zB "Burnout, Zähneknirschen, ...") Eine (ungeordnete) Liste wird mittels <ul> eingeleitet. Du hast dann auch den Vorteil, dass du die Listenzeichen nicht mehr in den Fließtext einbauen musst.
Auch strukturiere dein HTML besser und ordne die Inhalte der Reihe nach. Und wenn du nirgends eine absolute Positionierung verwendest, bist du am richtigen Weg. Die absolute Positionierung hat nämlich auch den Nachteil, dass es bei kleineren Browsern zu unschönen Positionierungen kommt.
 
AW: CSS hover effekt funktioniert nicht richtig

ah okay, danke für die tips !! wieso hart :) ? der richtige weg kann zwar manchmal etwas "steinig" sein, aber als hart nehm ich es nich unbedingt wahr - auf das ziel / ergebnis / benefit kommts an.
du hast recht, ich sollte es nochmal komplett neu machen ..
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.964
Beiträge
1.540.132
Mitglieder
68.144
Neuestes Mitglied
Brandneu Design
Oben