class ausblenden bei Hover

[Quiezel]

Einen schönen Tag wünsche ich.

Mein erster Post hier im Webbereich, bin aber auch noch sehr frisch in dem Bereich. Mein Problem ist folgendes: Ich habe eine Auflistung von Links die beim Hovern eine class anzeigen auf der rechten Seite. Also quasi eine Infobox über den Link der gerade Gehovert wird. Das klappt auch alles wunderbar. Nun möchte ich aber gerne eine Infobox an diese Stelle setzen falls kein Link gehovert wird. Diese soll sich dann ausblenden sobald man über einen Link geht und die dadurch aktuelle Infobox angezeigt bekommt.

<div class="container">
  <a href="#">Link 1</a>
  <div class="tooltip">Content für Tooltip 1</div>
</div>
<div class="container">
  <a href="#">omg Link 2!!!!</a>
  <div class="tooltip">Content für Tooltip 2</div>
</div>

Das ist der html code für die boxen.

.container {
  position: absolute;
}

.tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 23px;
margin-left: 722px;
margin-top: 200px; 
  width: 240px;
  height: 100px;
    
  padding: 10px 10px;
    
  border-left: 5px solid #e30613;
  border-right: 5px solid #e30613;
 background-color: #d9d9d9;
}

a:hover + .tooltip {
  display: inline-block;
  
}

Und das der css-code allerdings nur der für die Infoboxen beim hovern. Der Rest ist wie gesagt noch nicht vorhanden. Ich hoffe man versteht mein anliegen. Ich befürchte ich sehe den Wald vor lauter Bäumen nicht und zerbreche mir den Kopf ohne Grund.

Schonmal ein Danke im voraus.

lg Quiez

 

[cebito]

AW: class ausblenden bei Hover

So vielleicht?

<div class="container">
  <a href="#">Link 1</a>
  <div class="placeholder">Content für Placeholder 1</div>
  <div class="tooltip">Content für Tooltip 1</div>
</div>

.placeholder{
  display:inline-block;
  /* hier noch die ganzen anderen styles */
}
a:hover + .placeholder{
  display:none;
}

 

[Quiezel]

AW: class ausblenden bei Hover

Ja das war der richtige weg . Allerdings musste ich die placeholder div vor die container klasse setzen. Sonst wurde lediglich der standart-tooltip ausgeblendet, der neue aber nicht ein.

Danke für die Hilfe Ich muss mir allerdings nochmal genau vor Augen führen warum das jetzt alles so funktioniert wie es das tut .

Lg Quiez

 

[Quiezel]

AW: class ausblenden bei Hover

Sorry für den Doppelpost aber möchte ungern einen neuen Thread aufmachen deswegen. Ich habe jetzt meine oben geschriebene Absicht umgesetzt... stehe nun aber vor einem neuem problem.

Habe die oben beschriebene class bzw div im "Textbereich" Div untergebracht wo Sie natürlich auch angezeigt werden soll. Nun habe ich versucht mit position: absolute; und einer Pixel Angabe die Position festzulegen. Klappt auch alles wunderbar allerdings verschiebt sich die infobox nun unabhängig von dem textbereich wenn ich die Fensterbreite veränder. Müsste sich diese klasse nicht an dem Elternelement, also dem Textbereich orientieren und dementsprechend nicht aus dem Rahmen fallen? Wenn ich mir den Befehl durchlese müsste genau das passieren. Vermutlich auch wieder ein grober Anfängerfehler der sich leider nach stundenlanger durchforstung des Netzes noch nicht beheben lässt.

Ich glaube ich werde die Grundlagen noch einmal durchgehen müssen

Einen angenehmen Abend noch.

Lg Quiez