Shop Mouse OverEffekt

tm190492

Hallo zusammen,

ich bin neu hier und bräuchte einmal eure Hilfe. Ich erstelle gerade meinen Onlineshop. Ich stoße bei einem MouseOver Effekt an meine Grenzen.
Es ist so das wenn man im Shop mit der Maus über ein Produkt fährt wird das Grau. Das möchte ich abschalte doch leider gelingt es mir nicht.

Mein Ziel ist es das wenn man über das Bild geht, dass dort das zweite Produktbild angezeigt wird.
Anbei der Link:
http://lindtex.de/?post_type=product

Der Support oder über Suchfunktion habe ich schon alles probiert leider ohne Erfolg. Ich hoffe hier kann man mir helfen.

Vielen Dank schonmal.

Mfg
Tobi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Henk1060

zb. https://www.themelocation.com/how-to-flip-pr…in-woocommerce/

tm190492

Vielen Dank für die schnelle Antwort Henk1060! Das Plugin habe ich bereits Ausprobiert. Leider zeigt das keinen Effekt. Hast du vielleicht noch eine Idee?

Henk1060

hast du dir auch angesehen wie das plugin funtzt?
es muss natürlich auch ein 2. bild geladen werden

tm190492

ja ich habe ein Produktbild und ein Bild in der Gallerie. Aber es funktioniert leider nicht.

Henk1060

es gibt auch noch diese
[h=3][/h]WC Secondary Product Thumbnail
WooCommerce Product Flipper
mal einfach testen

Henk1060

wobei ich habe es gerade bei mir getestet und es ging.

tm190492

Leider funktioniert kein Plugin bei mir. Ich denke es liegt nicht an dem Plugin sondern an einer Vererbung... Deswegen bin ich leider auch so ratlos warum der Effekt nicht deaktiviert wird.

Henk1060

wollte es mir gerade genauer ansehen.. hm... läuft eines der module?

SirEctor

Der Mouseover, der zur Zeit aktiv ist, kommt aus folgendem CSS-Teil

Code

.woocommerce .archive_products #site-content-inner>.product-loop article .site-product-inner .product-image-wrapper:hover:before, .woocommerce-page .archive_products #site-content-inner>.product-loop article .site-product-inner .product-image-wrapper:hover:before {
    opacity: .6;
    visibility: visible;
}


input[type="submit"], button, .muenchen_container_wrapper.hero, .featured_sticky article footer .muenchen_link_right:hover, .featured_sticky article.sticky footer .muenchen_link_right:hover, body.single article .social-share a, #offcanvas .area ul.menu li.open-sub > .sub-menu-trigger, #offcanvas .area ul.menu li .sub-menu-trigger:hover, #header_main, #header_main .muenchen_header_additions .search_popup .search_form_container form:after, .muenchen_container_wrapper.dark .wc-tab .comment-respond input[type="submit"], .muenchen_container_wrapper.dark .wc-tab .comment-respond button, .woocommerce .wc-proceed-to-checkout a, .woocommerce-page .wc-proceed-to-checkout a, .woocommerce .order-again a, .woocommerce-page .order-again a, .woocommerce .cross-sells article .site-product-meta, .woocommerce .recent_products article .site-product-meta, .woocommerce .sale_products article .site-product-meta, .woocommerce .featured-products article .site-product-meta, .woocommerce-page .cross-sells article .site-product-meta, .woocommerce-page .featured-products article .site-product-meta, .woocommerce .product-loop .slick-arrow:hover, .woocommerce .product_list_widget .slick-arrow:hover, .woocommerce-page .product-loop .slick-arrow:hover, .woocommerce-page .product_list_widget .slick-arrow:hover, .woocommerce form .quantity .quantity_button:hover, .woocommerce-page form .quantity .quantity_button:hover, .widget.woocommerce.widget_price_filter .price_slider_amount .button:hover, .widget.woocommerce.widget_price_filter .ui-slider-handle:before, .widget.woocommerce.widget_price_filter .ui-slider-range, .widget.woocommerce.widget_shopping_cart .buttons .button, .widget.woocommerce.widget_shopping_cart .buttons .button.checkout:hover, .widget_search input[type="submit"], .widget_muenchen_icon_text h3:after, .front_content .widget_muenchen_icon_text h3:after, body > footer .widgets .widget_search form:hover:after, #mp-content > footer .widgets .widget_search form:hover:after, body > footer .widgets .widget_product_search form:hover:after, #mp-content > footer .widgets .widget_product_search form:hover:after, body > footer .social-share a:hover, #mp-content > footer .social-share a:hover, .woocommerce .archive_products #site-content-inner > .product-loop article .site-product-inner .product-image-wrapper:before, .woocommerce-page .archive_products #site-content-inner > .product-loop article .site-product-inner .product-image-wrapper:before, .muenchen_blog article.product .site-product-inner .product-image-wrapper:before, .front_content .widget.woocommerce.widget_products .product_list_widget li .site-widget-product-title, .front_content .widget.woocommerce.widget_recent_reviews .product_list_widget li .site-widget-product-title, .front_content .widget.woocommerce.widget_top_rated_products .product_list_widget li .site-widget-product-title, div.pp_woocommerce .pp_close, div.pp_woocommerce a.pp_contract, div.pp_woocommerce a.pp_expand, div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_arrow_previous:before, div.pp_woocommerce .pp_next:before, div.pp_woocommerce .pp_previous:before {
    background-color: #95a5a6;
}

Du könntest, um gegen zu wirken, im Custom-CSS opacity: 0; schreiben oder visibility: none;

tm190492

Ich denke die Module sind alle am laufen... Ich steh aber gerade ein wenig auf dem Schlauch wo ich die Aktivien Module finden kann.

Henk1060

alle drei module ;))) na dann zicken sie sich gegenseitig ;))

tm190492

Vielen Dank SirEctor! Den alten Effekt habe ich schonmal rausbekommen. Leider bleibt wechselt das Bild nicht trotz Aktivem Plug in.

tm190492

Momentan aktiv ist nur noch WC Secondary Product Thumbnail

Henk1060

also im html werden sie schon einmal geladen

SirEctor

CSS

.wcspt-has-gallery .secondary-thumb:hover {
    opacity: 1 !important;
}

Das könnte das Problem lösen. Kenne allerdings das Plugin nicht.

Henk1060

was mich etwas stutzig macht, die bilder sind nicht einmal mit einen href tag umgeben.
Macht auch keinen sinn für einen kunden, der will auf das bild klicken.

hast du da am template herum gerarbeitet?

tm190492

Ne das template habe ich so von Germanmarket gekauft. Der Support will mir da leider auch nicht helfen.

tm190492

SirEctor Vielen Dank!. Der Effekt funktioniert nun. Aber leider kann man jetzt auf der Bild nicht mehr klicken.

Henk1060

das meinte ich vorher schon...
waren vorher ja auch nicht klickbar

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Shop Mouse OverEffekt

Jetzt mitmachen!

Benutzer online in diesem Thema