zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS popup erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.05.2015, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2015
Beiträge: 1
magDasWeb befindet sich auf einem aufstrebenden Ast
Standard CSS popup erstellen

Hallo,

seit einiger Zeit versuche ich mit html und css Mitteln Info Popups zu erstellen,
die durch einen Hover Effekt über ein bestimmtes Control sichtbar werden und beim entfernen des Cursers wieder unsichtbar werden.

Hierbei bin ich recht weit gekommen, habe nur das Problem dass wenn wie im Beispiel unten z.B. ein img tag (oder auch link) verdeckt wird, dieses leider "durchscheint". Im Beispiel unten kommt ein Popup wenn man über das (i) (alt tag in einem img) hovert. In der Zeile drunter, die überdeckt werden soll, scheint der alt text durch.
Habt ihr eine Idee wie man das ändern kann?

Vielen Dank für jeden Hinweis.
Peter
HTML-Code:
<head>
<style>
div img
{
  z-index: 0;  
  }

.spanADesired {
  z-index: 10;
  position: relative;
  color: #8b4513;
  text-decoration: underline;  
  margin-right: 2px;
  margin-left: 2px;
}

  .spanADesired div {
    display: none;
  }

  .spanADesired:hover div {
    z-index: 10;
    display: block;    
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    border: 2px solid black;
    background-color: #A2D698 !important;
    /*background-image: url("http://www.w3schools.com/css/paper.gif");    */
  
    color: #000;
    text-align: center;
    padding: 5px;
  }
  
.spanAWrong {
    z-index: 0;
  position: relative;
  color: #8b4513;
  text-decoration: underline;  
  margin-left: 3px;
  margin-right: 2px;
}

.spanAWrong div {
  display: none;
}

.spanAWrong:hover div {
   z-index: 10;
  display: block;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 15em;
  border: 2px solid black;
  background-color: #F59795;
  color: #000;
  text-align: center;
  padding: 5px;
}
</style>
</head>
<body>

<div>
  <span>shut  &#x2192;</span>
  <span> shut </span>
  <span class="spanADesired">
  <img class="clsIco" src="/DesktopModules/stuff/Images/Icons/someicon.gif" alt="(i)" />
  <div>some content of the popup</div>
  </span>
</div>
<div>
  <div style="">
    <span>Desired  &#x2192;</span>
    <span class="spanAWrong"> Desired stuff
    <div>
  Your answer was: <b>dsfadf</b>»asefa«
    </div>
    </span>
    <span class="spanADesired">
    <img src="/DesktopModules/stuff/Images/Icons/someicon.gif" alt="alt text" />    
    </span>
  </div>
</div>
</body>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2015, 10:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du solltest zuerst damit anfangen valides HTML zu erstellen. Inline Elemente (spans) dürfen keine Blockelemente (divs) enthalten.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.05.2015, 11:15
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von magDasWeb Beitrag anzeigen
... habe nur das Problem dass wenn wie im Beispiel unten z.B. ein img tag (oder auch link) verdeckt wird, dieses leider "durchscheint". ...
Das liegt am „z-index“.
Ein „z-index: 1; in der Regel für „.spanADesired:hover div“ reicht völlig aus. Alle andere sollen weg.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
2 CSS Files -> 1 CSS File Habi CSS 7 17.02.2010 16:25
CSS hintergrund erstellen ? akiv CSS 3 10.06.2008 23:24
Wege zum guten CSS - Ausgewählte Links Sp33dy G0nz4l3s Ressourcen 1 27.05.2008 12:09
Tabellen mit CSS ShadowDeath CSS 3 16.03.2005 00:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:04 Uhr.