1

I'd like to use hover instead of click to display the head-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. Also when I hover the main menu, the background has a shadow. Please advise. Thank you.

0

Use id of this div <div id="header-account" class="skip-content">...</div>

<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() { // just this line
            $j(this).addClass("skip-active");
            $j(".skip-account").addClass("skip-active");
        }, function() {
            $j(this).removeClass("skip-active");
            $j(".skip-account").removeClass("skip-active");
        });
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.