On hover instead of 'click' header account links RWD theme magento 1.9.4

[ruvaders]

Hi,

I would like to use hover instead of ''click'' to display the header-account drop down links. I added the javascript to the bottom of header.phtml

app\design\frontend\rwd\default\template\page\html\header.phtml

<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>

But when I hover the head search box, there is a shadow under the search box. And when I hover the top nav menu, the background has also a shadow. Please advise. Thank you.

[khatri_gaurav · Accepted solution]

Hi @ruvaders 

You are facing this issue because skip-content class is being used on menu, search and the account dropdown. 

Try below customised code:

<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("#header-account").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>

If you find this helpful, please Accept as solution and provide Kudos.

Thanks.

[ruvaders]

Thank you.@khatri_gaurav It works. When I use a cell phone to access my site, I have to click the Account link twice to display the drop-down section. Is there any solution?