悬停效果js

Question

Have a question to you all. My problem is that i don't need the hover function on the main site. I need the price-circle without a hover function. The price-circle should be permanent shown on the site. Please help me.

A sample site is 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

Here is a quick hacky fix:

As you can see: I modified the div class hover to include the property display: block!important - which overrides any quircky js / css your theme is using. This is not ideal but it gets the job done :)

In short, add this to your css:

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

you might actually want to add this hack into your html after the JS has loaded. maybe wrap it in style tags just above the closing </body> tag.

Also you have to remove the 'onmouseleave' event handler, just comment it all out or delete it. you wont need it anymore.

If your theme is using JS to handle hovering (which by god, why? css can do this) then we'll need to dig deep in your theme in find every instance of hover and modify it.

What I would recommend is finding all instances of :hover in your css source code, also looking for it in js as well, then removing it there.

(personal opinion, this is why buying themes is often the worse thing, they always come with quircks :))