Product_short_description bei onmouseover anzeigen

[cayuco]

Zunächst einmal angenehme Feiertage für Alle! 

zu meinem Problem: Seit ein paar Tagen versuche ich in alle Seiten mit Galerie-Ansicht der Produkte (productlisting, tt-random, specials etc.) beim mouseover die product_short_description anzeigen zu lassen. Leider bisher ohne Erfolg. Ich habe mehrere Anleitungen im Web getestet, leider ohne Erfolg. Ich weiß, dass es mit reinem CSS möglich ist.

Hier der aktuelle Code am Beispiel der tt-random.html:

Code: PHP  [Auswählen]

<!-- tt_random Anfang-->
<div class="p_show1">
  {foreach name=aussen item=module_data from=$tt_random}
  {php} $col++;
  {/php}
 <div class="p_show2" style="cursor:pointer;" title="Zu den Produktdetails" onclick="location.href='{$module_data.PRODUCTS_LINK}';">
        <div class="p_show3">
        <h3>{$module_data.PRODUCTS_NAME|strip_tags|truncate:55:"...":false}</h3>
        {if $module_data.PRODUCTS_IMAGE}<img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" />
        {else}
  <div style="height: 120px; width: 120px; text-align: center; border: 1px solid #f8f8f8; margin: 5px;"><strong>Kein Bild verf&uuml;gbar</strong></div>
        {/if}
         <div style="font-size:12px; color:#ff5400; font-weight: bold;">
          {$module_data.PRODUCTS_PRICE}</div>
            <p class="taxandshippinginfo">
                        {if $module_data.PRODUCTS_VPE}<strong>VPE :</strong> {$module_data.PRODUCTS_VPE}<br />{/if}
                {$module_data.PRODUCTS_TAX_INFO}
            {$module_data.PRODUCTS_SHIPPING_LINK}
               <br />Lieferung: {$module_data.PRODUCTS_SHIPPING_NAME}</p></div></div>
  {php}

  if ($col>=3) {
  $col=0;
  echo '';
  }
  {/php}

  {/foreach}
  <div id="cat_clear">&nbsp;</div>
</div>
<!-- tt_random Ende-->

Die styles hierfür sehen derzeit so aus:

Code: CSS  [Auswählen]

/*Product_listing*/
 .p_show2 {
        width: 216px;
        height: 310px;
        color: #454545;
        margin: 10px;
        float: left;
        border: 1px solid #e2e2e2;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        padding:2px 0 2px 12px;
        background:url(img/bg_show.png);
}

.p_show2:hover{border: 1px solid #ff5400;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        padding:2px 0 2px 12px;}

.p_show3 {
        width: 190px;
        height: 270px;
        color: #454545;
        margin: 10px;
        padding: 3px;
        text-align: center;
}

.p_show3 H3{
font-size: 11px;
color: #666;
}

.p_show3 img {
margin: auto;
border: 1px solid #e2e2e2;
}

Die Bilder zeigen 1. eine Lösung einer anderen Seite. Wobei ich auf die Bewertungen, etc. verzichten kann.
2. Bild zeigt den aktuellen Stand in meinem Shop.

Könnte mir jemand sagen, wie ich das nur mit CSS lösen könnte. Bisher gibt es diverse Lösungen, die allerdings ein "<a href="xxxx ..." voraussetzen. Das fehlt hier, da ich mit der Variablen "{$module_data.PRODUCTS_LINK}" arbeite.

Nach meiner Ansicht müsste das hier irgendwie angepasst werden:

Code: PHP  [Auswählen]

<div class="p_show2" style="cursor:pointer;" title="Zu den Produktdetails" onclick="location.href='{$module_data.PRODUCTS_LINK}';">

.

Bin schon jetzt für Hilfe dankbar.

Linkback: https://www.modified-shop.org/forum/index.php?topic=29995.0

[cayuco]

Hab das Problem gelöst. Habe eine "<span class" um das Vorschaubild gelegt. Dadurch nervt das hover nicht ununterbrochen, sondern erscheint erst wenn man mit der Maus über das Bild geht.
Jetzt noch ein bischen Feinschliff und es sieht gut aus.

[Sick]

Ist auf jeden Fall ein cooler Ansatz.
Danke fürs teilen.

[cayuco]

War ich wohl mit dem "Freu" etwas voreilig.
Alle Reihen funktionieren optisch korrekt. Nur die Letzte Reihe der Galerieansicht schiebt beim Hovern die Preis-, und Lieferkosten-Angaben nach unten.
Habe jetzt gelesen, dass der gehoverte Bereich mit "position: absolute" angegeben sein muss um über dem anderen DIV (mit "position: relative" zu liegen. Ist das soweit richtig?

[cayuco]

So nun habe ich es funktionsfähig - wenn auch nicht perfekt.
Seltsamerweise ist das - jeweils darunter liegende Vorschaubild immer im Vordergrund (vor den Hover-Div), trotz aller z-index-Versuche. Wie auch immer - da die Höhe meiner hover-Container nicht in das darunter liegende Produktbild ragt, ist es mir Wurst.

Hier die productlisting.html (aus Template):

Code: PHP  [Auswählen]

<div class="p_show1">
        {foreach name=aussen item=module_data from=$module_content}

   <div class="p_show2" style="cursor:pointer;" title="Zu den Produktdetails" onclick="location.href='{$module_data.PRODUCTS_LINK}';">
        <div class="p_show3">
        <h3>{$module_data.PRODUCTS_NAME|strip_tags|truncate:55:"...":false}</h3>
<div class="popp55"><span class="popup55">{if $module_data.PRODUCTS_IMAGE}<img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /> <span>
<p>{$module_data.PRODUCTS_SHORT_DESCRIPTION|strip_tags|truncate:375:" ...":false} <a href="{$module_data.PRODUCTS_LINK}">weiterlesen &raquo;</a></p></span></span></div>
        {else}
<div style="height: 120px; width: 120px; text-align: center; border: 1px solid #f8f8f8; margin: 5px;"><strong>Kein Bild verf&uuml;gbar</strong></div>
        {/if}
         <div style="font-size:12px; color:#ff5400; font-weight: bold;">
          {$module_data.PRODUCTS_PRICE}</div>
            <p class="taxandshippinginfo">
                        {if $module_data.PRODUCTS_VPE}<strong>VPE :</strong> {$module_data.PRODUCTS_VPE}<br />{/if}
                {$module_data.PRODUCTS_TAX_INFO}
            {$module_data.PRODUCTS_SHIPPING_LINK}
               <br />Lieferung: {$module_data.PRODUCTS_SHIPPING_NAME}</p></div></div>

  {/foreach}
  <div id="cat_clear">&nbsp;</div>
</div>

Und hier die Styles:

Code: CSS  [Auswählen]

/*Product_listing*/
 .p_show2 {
        width: 216px;
        height: 310px;
        color: #454545;
        margin: 10px;
        float: left;
        border: 1px solid #e2e2e2;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        padding:2px 0 2px 12px;
        background:url(img/bg_show.png);
}

.p_show2:hover{border: 1px solid #ff5400;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        padding:2px 0 2px 12px;}

.p_show3 {
        width: 190px;
        height: 270px;
        color: #454545;
        margin: 10px;
        padding: 3px;
        text-align: center;
        z-index: 5555;
}

div.popp55 {
position: relative;
z-index: 6666;}

.p_show3 H3{
font-size: 11px;
color: #666;
}

.p_show3 img {
margin: auto;
border: 1px solid #e2e2e2;
}
span.popup55 span {display:none;position:relative}
span.popup55:hover span {
display:block;
width: 280px;
height: 150px;
position:absolute; left:-58px; top:140px; z-index: 9999;
color: #454545;
background:#fff;
border: 2px solid #e2e2e2;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
padding:4px 4px 4px 4px;
background:url(img/bg_show44c.png);
overflow: hidden;}

Wohlgemerkt - bin kein Programmierer, eher Probierer. Aber selbstverständlich kann verbessert und geteilt werden.
Dann frohes Eiersuchen noch.

[Gradler]

Hast Du schon mal auf Versandkosten geklickt? Da überlagern dann alle Bilder im Vordergrund die Thickbox.

[cayuco]

Danke für den Tipp, Gradler. Ja, die Produktbilder werden mich wohl noch beschäftigen. Bis dahin habe ich die Versandkosten-Links deaktiviert. Da kein Warenkorb-Button vorhanden ist, sollte das erlaubt sein. Man muss immer erst auf die Detailsseite.
Werde mich heute abend aber noch einmal damit beschäftigen. Offensichtlich gibt es ein ernsthaftes Problem mit dem z-index.