unerwünschter Hover-Effekt

[Djoha]

Liebes Forum,

ich habe auf meinen Webseiten das Problem, dass in einigen Absätzen ein unerwünschter Hover-Effekt entsteht, dessen Ursache ich nicht ausfindig machen kann. D.h.: beim Überfahren mit der Maus wird ein Absatz mit der gleichen Farbe hinterlegt wie Links, die Schriftfarbe ändert sich auch entsprechend. Der Effekt geht, soweit ich das sehen kann, immer bis zum nächsten Bild und schließt dieses, nicht aber den jeweils folgenden Link ein. Befindet sich in einem betroffenen Abschnitt eine Aufzählungsliste, so verschwindet diese beim Überfahren mit der Maus. Hier ein Beispielcode:

<div id="main">
<h1>Text</h1>

<p>Text<img src="images/arrow_link.gif" alt=""/>&nbsp;<a href="mailingliste.html">Mailingliste</a> Text.</p>
<br/>
<p>Text <a href="kontakt.html">Text</a>Text<img src="images/arrow_link.gif" alt=""/>&nbsp;<a href="idee.html">Mehr ...</a>
</p>

An dieser Stelle geht der Hover-Effekt bis einschließlich <img src="images/arrow_link.gif" alt=""/>, verschwindet dann und taucht in einem späteren Absatz wieder auf.

Ich habe bereits versucht, das Image sowie die Absatzdefinition <p></p> zu entfernen, ohne Erfolg (zumal der Effekt auch in Absätzen auftritt, die nicht mit <p></p> begrenzt werden).

Im Internet habe ich dieses Problem bisher nicht gefunden - ich hoffe, von euch hat jemand eine Idee.

Besten Dank im Voraus für jeden Tipp,
Djoha

[Matthias Apsel]

Om nah hoo pez nyeetz, Djoha!

ich habe auf meinen Webseiten das Problem, dass in einigen Absätzen ein unerwünschter Hover-Effekt entsteht, dessen Ursache ich nicht ausfindig machen kann.

Hover-Effekte werden nicht im HTML festgelegt. Sie werden mit CSS (oder JavaScript) realisiert. Ohne Kentnis der Seite, lässt sich dir nicht helfen. Am besten wäre ein Link auf deine Seite. Dann solltest du auch dazuschreiben, welcher hover-Effekt erwünscht und welcher unerwünscht ist.

Matthias

[Djoha]

Hab mir sowas schon gedacht...

Hier der Link zur Seite: http://www2.gs.uni-heidelberg.de/sprache02/network/graduiertenplattform/index.html

Erwünscht sind Hover-Effekte in der mittleren Spalte für die Links, also alle unterstrichenen Textstellen.

Hilft es, wenn ich noch CSS-Code dazuschicke?

[Matthias Apsel]

Om nah hoo pez nyeetz, Djoha!

Hier der Link zur Seite: http://www2.gs.uni-heidelberg.de/sprache02/network/graduiertenplattform/index.html

Hilft es, wenn ich noch CSS-Code dazuschicke?

Das ist nicht notwendig, die unerwünschten hover-Effekte sind darauf zurückzuführen, dass es sich um a-Elemente handelt.

Ändere beispielsweise

<p>  
<a>  
Die Graduiertenplattform bietet eine Anlaufstelle für Nachwuchswissenschaftlerinnen und Nachwuchswissenschaftler, die sich im thematischen Großbereich »Sprache und Wissen« qualifizieren wollen. Sie finden hier Ansprechpartner für methodische und inhaltliche Fragen und Informationen zu Fördermöglichkeiten. Außerdem können Sie sich über unsere Plattform in eine thematisch angebundene  
<img alt="" src="images/arrow_link.gif">  
</a>  
<a href="mailingliste.html">Mailingliste</a>  
einschreiben.  
</p>  

in

<p>  
Die Graduiertenplattform bietet eine Anlaufstelle für Nachwuchswissenschaftlerinnen und Nachwuchswissenschaftler, die sich im thematischen Großbereich »Sprache und Wissen« qualifizieren wollen. Sie finden hier Ansprechpartner für methodische und inhaltliche Fragen und Informationen zu Fördermöglichkeiten. Außerdem können Sie sich über unsere Plattform in eine thematisch angebundene  
<img alt="" src="images/arrow_link.gif">  
<a href="mailingliste.html">Mailingliste</a>  
einschreiben.  
</p>  

Matthias

[Djoha]

Das ist nicht notwendig, die unerwünschten hover-Effekte sind darauf zurückzuführen, dass es sich um a-Elemente handelt.

Lieber Matthias,

wie du in meinem Code sehen konntest, handelte es sich bei den betroffenen Stellen in dem Sinne nicht um a-Elemente. Stattdessen war in vorangehenden Links das a-Element nicht korrekt geschlossen worden - da stand z.B.

<a href="dat/SUW-Graduierten-Newsletter_Juli 2013.pdf">hier<a/>

anstatt

<a href="dat/SUW-Graduierten-Newsletter_Juli 2013.pdf">hier</a>.

Wie dieser Patzer passieren konnte, keine Ahnung, aber jetzt ist das Problem behoben.

Djoha

[Martin Rettberg]

Hier der Link zur Seite: http://www2.gs.uni-heidelberg.de/sprache02/network/graduiertenplattform/index.html

Klick mal auf das kleine Bild ganz unten, dann sollte sich alles aufklären.

[Djoha]

Vielen Dank für diesen Hinweis - das hatte ich noch gar nicht gesehen!

Hier der Link zur Seite: http://www2.gs.uni-heidelberg.de/sprache02/network/graduiertenplattform/index.html

Klick mal auf das kleine Bild ganz unten, dann sollte sich alles aufklären.

[patrick123]

Hey, ich kenn mich nicht so super damit aus, aber wie wäre es wenn du den Hover Effekt einfach unterdrückst für die Text stelle, also dann im Selektor: "main"
{
text-decoration: none;
}

Zum Notfall per Inline-CSS?

<p style="text-decoration: none;>Text<img src="images/arrow_link.gif" alt=""/>&nbsp;<a href="mailingliste.html">Mailingliste</a> Text.</p>
<br/>
<p>Text <a href="kontakt.html">Text</a>Text<img src="images/arrow_link.gif" alt=""/>&nbsp;<a href="idee.html">Mehr ...</a>
</p>

• Beschäftige mich erst seit kurzer Zeit mit HTML/CSS also kann es sein das es dir nichts    nützt oder auch falsch ist, würde mich aber auch interessieren wie man es löst.

lg Patrick

[Djoha]

Danke für die Idee - hilft aber leider nicht.