Question

向大家提问。我的问题是我不需要主站点上的悬停功能。我需要没有悬停功能的价格圈。价格圈应永久显示在网站上。请帮帮我。

示例网站为http://shopper.queldorei.com

$('.products-grid .item').live({
        mouseenter: function(){
            if (mobile) return;

$('.hover .price-box', this).css({
                'opacity':0
            });
            if (Shopper.price_circle) {
                if ( !$(this).hasClass('calc-price-box') ) {
                    var padding = Math.floor( ($('.hover .price-box', this).actual('width') - $('.hover .price-box', this).actual('height'))/2 + 15 );
                    $('.hover .price-box', this).css({
                        'padding':padding+'px 15px',
                        'margin':(-(25+padding*2+$('.hover .price-box', this).actual('height')))+'px 0 0 0'
                    });
                    $(this).addClass('calc-price-box');
                }
                var that = this;
                $('.hover', this).show(0, function(){ $('.hover .price-box', that).animate({opacity:1}, 600) } );
            } else {
                $('.hover', this).show();
            }

            $(this).addClass('no-shadow');

        },
        mouseleave: function(){
            if (mobile) return;
            $('.hover', this).hide();
            $(this).removeClass('no-shadow');
        }
    });

Answer 1

这是一个快速的黑客修复：

enter image description here

正如您所看到的：我修改了div类hover以包含属性display: block!important - 覆盖您主题使用的任何quircky js / css 。这不是理想的，但它可以完成工作:)

简而言之，请将此添加到您的css：

li.item div.hover { display:block!important; }  /* danger, danger! hacky lol */

你可能真的想在加载JS之后将这个hack添加到你的html中。可以将其包含在style标记上方的</body>标记中。

此外，你必须删除＆＃39; onmouseleave＆＃39;事件处理程序，只需将其全部注释掉或删除它。你不再需要了它。

如果你的主题使用JS处理悬停（上帝，为什么？css可以做到这一点）那么我们需要深入挖掘你的主题，找到hover的每个实例并修改它

我建议您在css源代码中查找:hover的所有实例，同时在js中查找它，然后将其删除。

（个人意见，这就是为什么购买主题通常是更糟糕的事情，他们总是带着怪癖：））

悬停效果js

1 个答案: