悬停效果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 -将覆盖您的主题正在使用的任何古怪的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中查找，然后将其删除。

(个人观点，这就是为什么购买主题往往是最糟糕的事情，它们总是伴随着怪癖：)