懸停效果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中查找它，然后將其刪除。

（個人觀點，這就是為什么購買主題通常是更糟糕的事情，它們總是伴隨着敲擊聲：））