# Infobox bei Mouseover

**URL:** <https://forum.shopware.com/t/infobox-bei-mouseover/6166>\
**Category:** Shopware 3.5\
**Tags:** templates--design\
**Created:** [13. Februar 2012 um 15:17 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166 "2012-02-13T15:17:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pfiffi80](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfiffi80](https://forum.shopware.com/u/pfiffi80)\
**Post date:** [13. Februar 2012 um 15:17 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166/1 "2012-02-13T15:17:11Z")

</div>

Hallo Zusammen, bin heute über diesen Shop gestolper: [hier](http://www.redcoon.de/c10100000-Beamer-Projektoren) mir gefällt dieses Aufspringen bei der Artikelbox wenn man drüber fährt… weiß jemand wie das funktioniert? Das ist ja scheinbar über js gemacht, über CSS würde ich das auch einigermaßen hinbekommen…aber mir gefällt hier besonders die automatische Anpassung (linksbündig beim ersten Artikel, dann mittig und dann rechtsbündig…) Ich hatte das so versucht: Beim Artikelbild hab ich folgendes ergänzt… `onmouseover="document.getElementById('hover').style.display = 'block';" onmouseout="document.getElementById('hover').style.display = 'none';"` und die ganzen Buttons hab ich dann in den

eingefügt… hat leider nicht gut funktioniert, beim drüberfahren erschienen die Boxen nur beim ersten Artikel bei den anderen nicht… Hat jemand Ahnung von sowas? Danke

---

<div class="post-metadata">

**Author:** ![waldicom](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/waldicom/32/12881_2.png) [@waldicom](https://forum.shopware.com/u/waldicom)\
**Post date:** [13. Februar 2012 um 15:52 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166/2 "2012-02-13T15:52:49Z")

</div>

[quote]hat leider nicht gut funktioniert, beim drüberfahren erschienen die Boxen nur beim ersten Artikel bei den anderen nicht…[/quote] Die “id” darf nur einmal im DOM vorkommen, deswegen funktioniert es nur mit dem ersten. Entweder verschiedene ID verwenden oder über Klassen realisieren. Mit jQuery geht das ganz gut

---

<div class="post-metadata">

**Author:** ![pfiffi80](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfiffi80](https://forum.shopware.com/u/pfiffi80)\
**Post date:** [14. Februar 2012 um 09:16 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166/3 "2012-02-14T09:16:27Z")

</div>

Hi, danke für die Antwort… Gibt es irgendwo ein Beispiel wie ich das machen könnte? Oder wonach könnte ich z.B. suchen? Besten Dank

---

<div class="post-metadata">

**Author:** ![pfiffi80](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfiffi80](https://forum.shopware.com/u/pfiffi80)\
**Post date:** [14. Februar 2012 um 09:59 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166/4 "2012-02-14T09:59:06Z")

</div>

Ich habe soeben das [hier](http://scott.sauyet.com/Javascript/Demo/2008-14-28a/) gefunden, jedoch kommt bei mir eine Fehlermeldung wenn ich das so mache… Was habe ich gemacht: In die /index/header.tpl folgendes: ` {block name="frontend\_index\_header\_javascript\_jquery" append}<script type="text/javascript">
    $(document).ready(function() {
        var hide = false;
        $(".artbox_thumb").hover(function(){
            if (hide) clearTimeout(hide);
            $("#hover").fadeIn();
        }, function() {
            hide = setTimeout(function() {$("#hover").fadeOut("slow");}, 250);
        });
        $("#hover").hover(function(){
            if (hide) clearTimeout(hide);
        }, function() {
            hide = setTimeout(function() {$("#hover").fadeOut("slow");}, 250);
        });
    });
</script>{/block}` und in der /listing/box\_article.tpl: [code] {block name=‘frontend\_listing\_box\_article\_actions’}

{block name=‘frontend\_listing\_box\_article\_actions\_buy\_now’} {\* Buy now button \*} {if !$sArticle.sConfigurator && !$sArticle.variants && !$sArticle.sVariantArticle && !$sArticle.laststock == 1} [{s name=‘ListingBoxLinkBuy’}{/s}]({url controller=‘checkout’ action=‘addArticle’ sAdd=$sArticle.ordernumber} “{s name=‘ListingBoxLinkBuy’}{/s}”) {/if} {/block} {block name=‘frontend\_listing\_box\_article\_actions\_inline’} {\* More informations button \*} {s name=‘ListingBoxLinkDetails’}{/s} {/block}

{/block} [/code] Habe ich etwas vergessen? Ich kenn mich leider nicht so wirklich aus was js angeht… Gruß Pfiffi

---

<div class="post-metadata">

**Author:** ![pfiffi80](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfiffi80](https://forum.shopware.com/u/pfiffi80)\
**Post date:** [15. Februar 2012 um 07:40 UTC](https://forum.shopware.com/t/infobox-bei-mouseover/6166/5 "2012-02-15T07:40:30Z")

</div>

Morgen zusammen, kann mir keiner helfen? Bzw. einen Tipp geben? Danke Pfiffi