Ist es möglich, sowas mit HTML und CSS zu realisieren?

...komplette Frage anzeigen

5 Antworten

(...) wie kann ich es machen das dadrüber was erscheint sobald ich mit den Zeiger drauf gehe? (nicht anklicke!)

Es gibt mehrere Möglichkeiten wie du so eine Tooltip-Blase (Tooltip-Bubble) erstellen kannst. Entweder mit reinem HTML oder mit Hilfe von CSS und/oder JavaScript (jQuery). Kommt halt ganz darauf an, was alles möglich sein soll. Hier mal ein paar Lösungsansätze.

<span title="Gemacht mit Liebe von ...">♥</span>

Wenn du die Tooltip-Blase jedoch gestalten möchtest, mit dem title-Attribut nicht weiterkommst. Sprich anstatt des title-Attributes ein weiteres Element verschachtelst, dieses absolute positionierst und beim Überfahren (hovern) mit der Maus anzeigen lässt.

Schau dir einfach mal balloon.css an oder such mit Google nach "Pure CSS Tooltip" oder "Pure CSS Tooltip-Bubble". Mit diesen Begriffen Dutzend Schritt-für-Schritt Anleitungen (Tutorials) finden wirst. Ansonsten einfach die balloon.min.css einbindest und wie in der Dokumentation beschrieben, deinen Text über das data-balloon Attribut festlegst. 

LG medmonk 

Wenn ich mich richtig erinnere, mit dem HTML-Atribut 

title="Gemacht mit Love von [NAME]"

Außerdem könnte man mit CSS und "element:hover" speziellen CSS Code festlegen der nur aktiv ist, wenn man mit dem Mauszeiger übers Herz geht. So könntest du z.B. das Herz normal schwarz machen und nur wenn man drüber fährt rot. So kannst du auch einen Text anzeigen lassen der normal unsichtbar ist ("display: none;" oder auch "opacity: 0;"). 

Mit dem CSS Atribut "transission" könntest du solche Übergänge auch noch smooth machen über einen Zeitraum.

HamsterKnowHow 01.07.2017, 22:48

Aber wie schreibe ich dann in HMTL das der Text erscheinen soll? Das mit dem hover hab ich kapiert, wie es Rot wird, usw. aber wie schreib ich, das ein bestimmter Text ausgegeben wird und wo schreibe ich den in HMTL?

0
ColaKadse8 01.07.2017, 23:17
@HamsterKnowHow
<span id="heart" title="Gemacht mit Love von [NAME]">
♥
</span>

Das wäre das reine HTML Beispiel.

Und hier eins mit CSS (musst natürlich den look anpassen)

https://pastebin.com/7ZZSAK9w

Musste es auf Pastebin packen weil diese Seite mich kein HTML Code rein pasten lässt.

Hab Übrigens "transition" in meiner Antwort falsch geschrieben, sorry wenn dich das verwirrt hat.

0

Hat die gutefrage-Beta es Dir angetan, was? ;)

Das macht man einfach mit JavaScript. Das Herz ist ein Symbol oder ein Bild und nach einem Ereignis (hier: onMouseOver) klappt ein div-Container aus, der zentriert ist.

Wenn Du es Dir bei gutefrage selbst angucken kannst, dann nutze doch die Google Chrome Developer Tools - die Klasse, die Du suchst, heißt Bigfoot-bubble und findest Du in einem div-Container. :-)

Container - (html, Design, CSS)
ColaKadse8 01.07.2017, 22:45

Der Gutefrage Quellcode ist nicht besonders zum abschauen geeignet, da er umfangreich und vermutlich vor allem für einen Anfänger nicht ganz so leicht zu verstehen ist. Vor allem wenns um JS geht. Außerdem braucht man für sowas nicht unbedingt JS, für die Grundfunktionalität reichen da HTML/CSS aus und er hat ja nicht nach JS gefragt, also kann er das vielleicht nicht.

1
Willibergi 01.07.2017, 22:49
@ColaKadse8

Ich kenne den Hamster, keine Sorge. ;-)

Ich mach's lieber mit einem kleinen JQuery-Skript, das ist aber Geschmackssache. CSS-Animationen mag ich persönlich nicht so wirklich.

2
Kolorbon 01.07.2017, 22:52
@Willibergi

Derart viel CSS? Seriously? In diesem Fall werden nur :hover und max-width, und für das Herz animation verwendet...

1
Willibergi 01.07.2017, 22:53
@Kolorbon

Mehr CSS als JavaScript definitiv. Und die Übersichtlichkeit ist bei einem kleinen Skript imho besser gegeben als in verschiedenen Klassendefinitionen in CSS.

1
ColaKadse8 01.07.2017, 23:21
@Willibergi

Für das hover Zeug alleine braucht man aber keine Animationen, nach Animationen hat er ja nie gefragt.

Generell finde ich auch fraglich dafür jetzt extra JS zu verwenden. Das ist nur ein kleines Feature, da braucht man nicht extra JS zu schreiben.

Vor allem nicht extra JQuery einzubinden wenn man es sonst nicht braucht, das sollte ja wohl klar sein.

0
Willibergi 01.07.2017, 23:31
@ColaKadse8

Ich bin mal davon ausgegangen, dass es animiert werden soll, weil das Pendant von gutefrage, an dem er sich orientiert, auch animiert ist.

Aber auch wenn nicht, ist die reine Änderung des Textes mit textContent ein Leichtes und benötigt genau zwei Listener. 

Aber wie gesagt: Geschmackssache. Ich bin JavaScriptler und arbeite lieber damit, es geht aber natürlich auch mit CSS.

0
Kolorbon 01.07.2017, 22:49

Nope. Nopedinope. Für solch einfache Sachen sollte allein CSS verwendet werden. Genauso wurde es auch bei gutefrage umgesetzt.

Google Chrome ist übrigens nicht der einzige Browser...

1
HamsterKnowHow 01.07.2017, 22:52
@Kolorbon

Ich kann beides nicht, und wäre auch bereit JS zu nehmen, Übung macht den Meister ;)

Chrome nutze ich immer, ich glaub das weiß Willi auch ^^

1
Willibergi 01.07.2017, 22:52
@Kolorbon

Sollte? Sagt wer? Das ist immer von mehreren Faktoren abhängig, wie man es letztendlich umsetzt. 

Mit CSS geht es natürlich, aber dass dafür "allein CSS" verwendet werden sollte, dem stimme ich definitiv nicht zu. Man kann, es geht aber auch gut anders.

1
Babelfish 01.07.2017, 23:51
@Willibergi

Für was braucht mal da JS? CSS bietet alles was man dazu benötigt und ist dann auch performanter.

0
HamsterKnowHow 01.07.2017, 22:55

Wie würde ich das in JS dann schreiben? Den Code habe ich mir schon angesehen, klar ;)

0
Willibergi 01.07.2017, 22:58
@HamsterKnowHow

Keine Ahnung, wie Dein Code momentan aussieht. Hast Du schon die grundsätzliche HTML-Struktur? 

Das Herz und der Text in jeweils einem eigenen div und die beiden divs wieder in einem gemeinsamen div.

Dann löst Du bei einem onMouseOver einfach eine Animation aus, zum Beispiel einfach eine Positionsänderung oder aber auch ein Slide der beiden divs nach links bzw. rechts. Die benötigten Klassen findest Du in der JQuery-Dokumentation, die hast Du Dir ja schon mal angesehen. :-)

0

Ja, lässt sich einfach umsetzen. Sogar mit einem einzelnen Element und ohne Bilder.

Das "Drüber gehen" nennt man hovern. Im css sieht das so aus:

.kasten:hover {
  background-color: red;
}

Hoverst du nun das Element mit der Klasse .kasten, wird dessen Hintergrundfarbe rot.

Die Herzform kannst du mit der Eigenschaft clip-path erreichen. Google "css clip path generator" und du wirst auch schon vorgefertigte Formen wie ein Herz als Code finden.

Die Nachricht, dieser Tooltip, wäre dann ein Pseudoelement, before oder after. Der Text steht entsprechend als content-Eigenschaft im Pseudo.

Was dabei nicht geht ist dynamisch die Namen einzusetzen, denn dafür bräuchte man Javascript. Und auch dann müssten wir meine Idee etwas umstrukturieren, weil man keine Pseudoelemente ansprechen kann.

Was möchtest Du wissen?