Home/ Questions/Q 9314571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T02:10:00+00:00

I have a menu with a black to transparent gradient. When I hover the

  • 0

I have a menu with a black to transparent gradient. When I hover the menu, I’d like to turn it into a completely black fill. Why isn’t the following working?

$('#topmenu').hide().animate({
    'height': 'toggle'
    }, "slow").hover(function() {$(this).animate({ 'opacity' : 1 }).css( 'background' , 'rgb(0,0,0)', 'box-shadow' , "0px 5px 15px 0px rgba(0, 0, 0, 0.5)" );}, function() {$(this).animate({ 'opacity' : 0.6  }).css( 'background' , "url('<?php bloginfo('template_url'); ?>/images/topmenu_bg.png') repeat-x" );});

the menu’s bg image is set through the stylesheet with the property ‘background’.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why not this plain CSS?

    #topmenu {
    background-image:linear-gradient(to bottom,black,transparent);
    background-color:transparent;
    transition:background-color 1s ease;
    /* vendor-specific alternatives follow */
    background-image:-webkit-linear-gradient(top,black,transparent);
    -webkit-transition:background-color 1s ease;
}
#topmenu:hover {
    background-color:black;
}

    Plain CSS is immeasurably faster than jQuery, both figuratively and literally since I have no idea how to measure CSS “speed” XD

    • 0