On hover instead of 'click' for mini cart and top account buttons in Magento RWD theme

Question

Where do i have to change the jQuery functionality to show the drop downs from the 'mini cart' and the 'top-account' on hover instead of click on the desktop versions?

Thanks!

Answer 1

No one has answered this question and you probably don't need it but others might

go to app/design/frontend/yourtheme/default/template/checkout/cart/minicart.phtml

Add the following:

<div class="container"> 
</div>

And now the jQuery to the bottom of the file :

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.container').hover(function() {
    jQuery(this).children('#header-cart,.skip-cart').addClass("skip-active");
}, function() {
    jQuery(this).children('#header-cart,.skip-cart').removeClass("skip-active");
});        
});
</script>

Your file minicart.phtml should look like this :

<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
    $_cartQty = 0;
}
?>
<div class="container">
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
<span class="label"><?php echo $this->__('Cart'); ?></span>
<span class="count"><?php echo $_cartQty; ?></span>
</a>

<div id="header-cart" class="block block-cart skip-content">
<?php echo $this->getChildHtml('minicart_content');?>
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.container').hover(function() {
    jQuery(this).children('#header-cart,.skip-cart').addClass("skip-active");
}, function() {
    jQuery(this).children('#header-cart,.skip-cart').removeClass("skip-active");
});        
});
</script>

Answer 2

To make this work for account links, use this javascript:

<script type="text/javascript">
    $j(document).ready(function(){
        $j(".skip-account").hover(function() {
            $j(this).addClass("skip-active");
            $j("#header-account").addClass("skip-active");
        }, function() {
            $j(this).removeClass("skip-active");
            $j("#header-account").removeClass("skip-active");
        });
        $j(".skip-content").hover(function() {
            $j(this).addClass("skip-active");
            $j(".skip-account").addClass("skip-active");
        }, function() {
            $j(this).removeClass("skip-active");
            $j(".skip-account").removeClass("skip-active");
        });
    });
</script>

Also you should edit app.js and comment out the Skip Links function which is no longer needed.