Seeking to use jQuery's addClass() function to change my button's CSS on hover and mousedown

Question

I want to specially create hover and click effects for my buttons, but in a way that changes it for a different button than the one being hovered over, so I need to use JavaScript, not CSS.

I have the following jQuery:

    // Highlights Browse button when the user hovers over div.upload
    $(".upload").hover(
        function() {
            $("input[type='button']").addClass("browse-hover");
        },
        function() {
            $("input[type='button']").removeClass("browse-hover");
        }
    );

    // Darkens Browse button when user clicks on div.upload
    $(".upload").mousedown(function() {
        $("input[type='button']").addClass("browse-active");
    });

    $(".upload").mouseup(function() {
        $("input[type='button']").addClass("browse-active");
    });

With the following classes from my main CSS file being added:

.browse-hover {
    background: #9972ad; /* Old browsers */
    background: -moz-linear-gradient(top,  #9972ad 0%, #7a3e99 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9972ad), color-stop(100%,#7a3e99)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #9972ad 0%,#7a3e99 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9972ad', endColorstr='#7a3e99',GradientType=0 ); /* IE6-8 */
}

.browse-active {
    background: red;
}

HTML:

<div class="upload-form">
            <form action="" method="post" enctype="multipart/form-data">
                <div class="upload">
                    <input type="file" name="file-input">
                     <span class="input-filename">Select a file...</span>
                     <input type="button" value="Browse">
                </div>

                <input type="submit" name="submit" value="Upload">
                <span class="valid-formats">Valid input: .txt files &lt;= 512 KB</span>
            </form>
        </div>

I'm using addClass() in a way that should overwrite the previous values, as there's a background set before (gradient) that I'm changing on hover. It just isn't working whatsoever. It's wired up properly, if I click with an alert set it will execute properly.

Are you sure there are no conflicts with your other CSS? It looks like it works as is: jsfiddle.net/zaknotzak/bLXAy — zxqx
– zxqx, Commented Feb 7, 2013 at 23:36
Other than a minor correction for mouseup, everything seems to be working fine: jsfiddle.net/ExplosionPIlls/Q5v6m — Explosion Pills
– Explosion Pills, Commented Feb 7, 2013 at 23:36

mika · Accepted Answer · 2013-02-07 23:37:44Z

3

Button is a child of upload so you can go full CSS and try that:

.upload:hover input[type='button'] { /* style */ }

http://jsfiddle.net/bLXAy/2/

answered Feb 7, 2013 at 23:37

mika

1,4611 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gion_13 Over a year ago

you should add the :active pseudo class too

derek_duncan · Accepted Answer · 2013-02-07 23:40:12Z

0

Try running all this code when the DOM is ready by nesting it in (function() { YOUR CODE });

answered Feb 7, 2013 at 23:40

derek_duncan

1,3771 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Seeking to use jQuery's addClass() function to change my button's CSS on hover and mousedown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related