CSS/Javascript: mit :hover ein anderes Element sichtbar machen?
Hallo ihr lieben,
ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.
Hier der "bisherige" Code:
<html>
<head><title> Test :)</title>
<script type="text/javascript>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
jQuery('#hoverdiv').hoverdiv(
function() {$('#Kindelement').show();},
function() {$('#Kindelement').hide();}
);
</script>
<style>
.hover
{
background-color: red;
z-index: 1;
}
.Kindelement
{
position: absolute;
top:0;
background-color: blue;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
opacity: 0;
z-index: 2;
}
.hoverdiv
{
position: relative;
}
.hoverdiv:hover + .Kindelement
{
opacity: 1;
}
</style>
</head>
<body>
<div id="hoverdiv" style="background: grey;
color: white;
border-radius: 50px !important;
font-family: "Helvetica Neue",
Arial, sans-serif !important;
float: none !important;" ;>
<a>+</a>
<div id="Kindelement"
style="color: white;
background: grey;
position: absolute;
top: 770px !important;
opacity: 0;">
<a href="link" style="color: white; background: grey">Name</a>
</div>
</div>
</body>
</html>
Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)
Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..
Dankeschön schonmal!
3 Antworten
Abgesehen von dem bereits benannten Fehler:
1) Deinem Dokument fehlt der Doctype. Dieser ist nicht optional.
2) Ich würde dir empfehlen, noch eine konkrete Zeichenkodierung (bestenfalls UTF-8, um Umlaute nicht maskieren zu müssen) festzulegen.
3) Binde dein CSS besser vor JS ein, das ist besser für die Performance der Seite. Inline-Styles würde ich zudem meiden, dies lässt sich auch alles mit CSS-Selektoren definieren. Somit dürfte sich auch dein Code verkürzen, da du, wie ich sehe, Properties doppelt definierst.
4) Das JavaScript würde ich an das Ende des body-Tags verschieben. Dann ist das Element, welches du ansprechen möchtest, auch geladen.
5) Welchen Link hast du zensiert? Oder sind es beide? Um sicherzugehen:
<a>+</a>
Wenn ein Link kein Ziel hat, verwende ein anderes, passendes Element.
6) Deine HTML-Elemente hast du mit id-Attributen ausgestattet, im CSS-Bereich versuchst du allerdings, diese mit einem Klassenselektor anzusprechen.
/* class selector */
.Kindelement { /* ... */ }
/* id selector */
#Kindelement { /* ... */ }
7) Das div-Element vor dem leeren Anchor hat einen Syntaxfehler (Semikolon außerhalb des Attributwerts):
float: none !important;" ;>
Zudem ist none der Standardwert für das float-Property.
8) Mir fällt auf, dass du öfter !important für die CSS-Properties setzt. Ich bezweifle, dass das wirklich nötig ist. Schau doch zunächst einmal, ob du deine Selektoren nicht konkreter definieren kannst, wenn sie denn überhaupt von anderen Properties überschrieben werden.
9) Hier hast du den nächsten Fehler:
<script type="text/javascript>
Der Attributwert wird nicht geschlossen (fehlendes Anführungszeichen) und der Tag selbst ebenso nicht. Das type-Attribut wird seit HTML5 übrigens nicht mehr benötigt und generell ist der Tag in deinem Markup überflüssig.
10) Wieso verwendest du einmal den Bezeichner jQuery und dann wiederum $? Bleibe doch besser stringent, entscheide dich für einen von beiden.
Einiges an CSS ist einfach vom Google Optimize übernommen. Ich versuche gerade einen A/B Test und habe sehr wenig Erfahrung (Student/Pflichtpraktikum 3. Woche). Programmierung ist im Studium eher lesen statt schreiben. Habe es jetzt allerdings mit Notepad ++ erstmal angefangen zu schreiben, da mich Google Optimize mit seiner Aufteilung von JS, CSS und HTML verwirrt. Ich weiß nicht wo ich was eintrage und bei CSS war es oft so, das meine Anweisungen ausgeführt würden aber schriftlich nirgends mehr aufgetaucht sind.. Deshalb der Umstieg um zu schauen, dass es erstmal läuft, um es dann in Optimize zu übertragen.
Die Auslagerung des CSS funktioniert komischerweise nicht. Habe den exakten Pfad angegeben, nur ist der komplette Style weg, sobald ich keine Inlines mache.
CSS/Javascript: mit :hover ein anderes Element sichtbar machen?
Ich verstehe nicht ganz, wofür Du hier Javascript oder gar jquery benötigst. Das geht ganz ohne. Hier das Prinzip:
<doctype html>
<title>hover div</title>
<style>
.kindelement {
display:none
}
.hoverdiv:hover > .kindelement {
display:block
}
</style>
<div class="hoverdiv">hover 1 <div class="kindelement">kindelement 1</div></div>
<div class="hoverdiv">hover 2 <div class="kindelement">kindelement 2</div></div>
<div class="hoverdiv">hover 4 <div class="kindelement">kindelement 3</div></div>
Alex
Weil meine div's nicht ineinander liegen sollen :) Es soll ein Element mit dem hover auf ein anderes sichtbar gemacht werden -> nicht innerhalb dieses divs sondern außerhalb.
und CSS ist ja kaskadierend. Also von Oben nach unten, dementsprechend kann ich nichts hovern was ausserhalb dieses divs liegt ...
Weil meine div's nicht ineinander liegen sollen :)
Aber genau das ist doch in Deinem Quelltext so.
das ist in dem obigen Code ein Fehler meinerseits, weil ich alles mögliche probiert habe
Dann solltest Du vielleicht genau beschreiben, was genau Du erreichen willst. Dann kann ich dir die Lösung sagen.
habe ich ja in meinem weiteren Kommentar geschrieben. Ich wollte nicht 10 Versionen hier rein posten :) Die ich hier vorliegen habe.
Ich möchte ein Element.. Wenn man auf dieses hovert, soll ein anderes außerhalb liegendes erscheinen. Wenn man die Maus vom Element wegbewegt soll es wieder verschwinden.
Ich möchte das ganze um Banner-Mapping zu erreichen :)
Ich möchte ein Element.. Wenn man auf dieses hovert, soll ein anderes außerhalb liegendes erscheinen.
Hört sich nach broken by design an. Warum kann das Element, das beim Hovern angezeigt werden soll, nicht Kindelement des übergeordneten Elements sein?
Ich möchte das ganze um Banner-Mapping zu erreichen :)
Was soll das sein?
Was ist broken by design?
Ich möchte nicht, dass der Text dann innerhalb des Elements auf das gehovert wird angezeigt wird :) Es soll so sein: https://jsfiddle.net/basti1012/m1g5015f/(kriege es aber mit demselben code, nur ausgetauscht nicht hin)
Durch Banner Mapping können mehrere Links zu Produkten auf einen Banner gesetzt werden -> Ziel ist es für mich ein Element auf einen Banner zu setzen über das man hovert & dann der Artikel name so wie in dem oben genannten Link erscheint :)
hoverdiv ist keine jquery funktion
die zeile solltest du auf jeden fall abändern zu
$("#hoverdiv").hover(...);
den rest hab ich mir jetzt aufgrund der formatierung nicht durchgelesen, aber das ist auf jeden fall ein großes problem an dem ganzen
Das ist eine Kombi aus allen Lösungen die ich versucht habe - deshalb auch verschiedenes .. einiges was du hier ansprichst habe ich schon verändert versucht, was allerdings nicht funktioniert hat. Ich bin schon seit 3 Tagen täglich am ändern, deshalb hab ich ehrlich gesagt auxh etwas den Überblick verloren.