Hover Text

CuzImCloud

Guten Tag, habe da eine Frage. Undzwar hatte ich ein mal ein ähnliches Thema dazu.

Es geht darum das sobald ich über etwas Hovere, ein Text angezeigt werden soll.

Dies geht soweit auch, aber da ich den Text gern woanders habe möchte habe ich es so gemacht:

Code

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">


<div class="forum">
<img src="img/forum.png" style="margin-right: 110px;"  />
</div>
</div>
<br />
</div>

<p class="fgeheim">TEST</p>

Alles anzeigen

Meine CSS sieht zudem so aus:

Code

.fgeheim {
  display: none;
  color: white;
}
.forum img:hover~ .fgeheim {
  display: block;
}

Kann mir jemand erklären wieso das nicht klappt?

Gruß!

m.scatello

Was du mit display:none wegblendest, kann kein Mouseover.

Versuche es mal mit opacity: 0;

CuzImCloud

1. Doch das geht auch. (Hover Text)

Hatte das schonmal nur funkt es jetzt grad nicht wie ich es möchte.

2. Mit Opacity funkt es auch nicht.

m.scatello

Natürlich get das mit opacity

Code

.fgeheim {
 opacity:0;
}
.fgeheim:hover {
opacity:100;
}

Es wäre mal nicht verkehrt, wenn man nicht nach einer Minute sagt, dass es nicht geht, sondern mal selber richtig testet

CuzImCloud

Bei mir funktioniert das nicht.

Ich teste es bereits sehr lange.

Und Tipp, ist es sinvoll fgeheim auf 0 zu setzen und sobald ich über fgeheim, den ich derzeit nicht sehe zu Hovern?

Möchte gerne das ich sobald ich auf das Bild Hover fgheim angezeigt bekomme.

Und das funktioniert bei mir nicht!

Gruß!

m.scatello

Siehe https://jsfiddle.net/mscatello/cs6rsr6n/3/

m.scatello

Zitat von CuzImCloud

Möchte gerne das ich sobald ich auf das Bild Hover fgheim angezeigt bekomme.

Vom Bild war im Eingangsbeitrag nicht die Rede

Siehe https://jsfiddle.net/mscatello/qydum404/39/

CuzImCloud

Ich habs sogar in meinem Code gezeigt ... das das sein soll sobald ich über Bild Hover.

https://jsfiddle.net/6qvh7oz4/3/

So sollte es sein, sobald ich über das Bild Hover soll der Text erscheinen, klappt aber nicht!

Beim Link funkt es nicht, aber soweit ich weiß ist das der Code dafür

m.scatello

Siehe https://jsfiddle.net/mscatello/qydum404/56/

Sempervivum

Bei dem Code in deinem Eingangsposting und dem aus #8 funktioniert es nicht, weil das img-Element tief in divs verschachtelt ist, Der "~"-Operator findet jedoch nur Geschwisterelemente. Und mit CSS kann man leider nicht im Baum nach oben gehen. Du musst es so umstrukturieren, dass das anzuzeigende Element auf der selben Ebene wie das gehoverte oder tiefer.

CuzImCloud

Wäre nett wenn du meine Datei nehmen kannst und nicht die aus einem anderen Thema!

Code

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">


<div class="test">
<img src="img/forum.png" alt="" border="0"  style="margin-right: 110px;" > </div>

</div>
<br />
</div>

<p class="geheim">GleichZeitig_YT</p>

Alles anzeigen

So funktioniert das leider nicht.

Die "p" Klasse muss unten sein.

basti1012

Wollte gerade sagen, das hatten wir doch gerade vor ein paar Tagen schoon gehabt.Da hatte ich doch Beispiel gemacht.

Sempervivum sagte das ja schon. Du kannst du nur Kinder und geschwister bedienen. Eltern geht nicht. Nachbarn geht auch noch vergesen

CuzImCloud

Damit ich es nicht später schreiben muss:

Hier ist meine Ganze Klasse:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">

<!-- Hier sind die Webseiten Daten -->
      <title>Home | *****.de</title>
      <link rel="shortcut icon" type="image/x-icon" href="img/start/favicon.png">
      <meta name="author" content="CuzImCloud">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link href="css/home.css" rel="stylesheet">
    <link href="css/geheim.css" rel="stylesheet">

<!-- Hier sind die CSS Datein -->
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <link href="css/animate.css" rel="stylesheet">

<!-- Hier sind die verschiedenen Schriftarten -->
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif" rel="stylesheet">

    </head>


    <body>

<section id="banner">

  <h2 class="animated zoomIn">Willkommen auf *****!</h2><br />
  <div class="animated zoomIn">
  <p2>Es sind derzeit <span style="color: red;" data-playercounter-ip="*****">0</span> Spieler auf unserem Server!</p2></div>

  <br /><br />


    <div class="ts3"><a href="ts3server://*****"><p style="font-family: Oswald; font-size: 25px;">*****</p></a></div>
    <div class="mc"><p class="animated-text" style="font-family: Oswald; font-size: 25px;">*****</p></div>
</section>
<br /><br /><br /><br /><br />

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">




<div class="forum">
<img src="img/forum.png" style="margin-right: 110px;"  />
</div>
<p class="geheim">GleichZeitig_YT</p>

<div class="team">
<img src="img/bild2.png" style="margin-right: 110px;" />
</div>

<div class="bewerben">
<img src="img/bewerben.png" style="margin-right: 110px;" />
</div>

<div class="teamspeak">
<img src="img/ts3.png" style="margin-right: 110px;" />
</div>

<div class="discord">
<img src="img/discord.png" />
</div>
</div>
<br />
</div>
</body>
</html>

Alles anzeigen

Ich habe verschiedene Klassen wie "teamspeak, discord etc"

Da dies nur Bilder sind möchte ich gerne das man sobald man auf eines der Bilder Hovert, ein Text erscheint Unter der Div Klasse "Balken" spricht wenn ich auf das Logo "Forum" gehe soll UNTER dem Balken mittig zentiert "Server Forum" stehen. Bei Teamspeak halt "Server TeamSpeak" etc.

CuzImCloud

basti1012

Ja genau, jedoch klappt das iwie beim neuen Teil nicht.

m.scatello

<p class="geheim">GleichZeitig_YT</p>

</div>

basti1012

Ich glaube, du verstehst das noch nicht mit den Geschwistern und Co.

Das geht, weil es Geschwistern sind.

Bzw. auch Nachbarn

* Link entfernt , weil existiert nicht mehr *

basti1012

In diesen Fall geht es, weil es hier das Kind ist.

* Link entfernt, weil existiert nicht mehr *

Aber nur weil ich hier den div hover

Jetzt mitmachen!