悬停效果js

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

这是一个快速的修正程序：

如您所见：我修改了div类hover以包括属性display: block!important它覆盖了您的主题正在使用的所有quickky js / css。 这不是很理想，但是可以完成工作:)

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

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

您实际上可能希望在JS加载后将此hack添加到您的html中。 也许将其包装在</body>标记上方的style标记中。

另外，您必须删除“ onmouseleave”事件处理程序，只需将其全部注释掉或将其删除即可。 您将不再需要它。

如果您的主题使用JS处理悬停（天哪，为什么？css可以做到这一点），那么我们将需要深入挖掘您的主题以找到每个hover实例并对其进行修改。

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

（个人观点，这就是为什么购买主题通常是更糟糕的事情，它们总是伴随着敲击声：））