How to fix jQuery and CSS problems?

Question

My Page:

Button

from the left to right is meant for; Normal, On Hover and Active. I am using a jQuery drop down feature, whereas I would like the normal image to show when the mouse is not over or it is active, the on hover image to show when you hover over and the active image to show when you click and the drop down appears.

I also need the caret to be 9px from the top and 4px from the left and if possible for it not to be selectable.

My page can be found here

EDIT: A JSFiddle has just been made.

<div id="Font-Type">
    <div class="dropdown">
        Arial <a href="#Font-Type" class="dropdown-toggle">▼</a>
        <ul class="dropdown-menu">
            <li class="Arial">Arial</li>
            <li>Monospace</li>
            <li>Cursive</li>
            <li>Fantasy</li>
        </ul>
    </div>
</div>

Please not that I have chosen to do the drop down like this for the font-type drop down to display a preview of the font, of which is temporary not working but I know the problem and am trying to sort out this one first, as seen above.

Edit for David Fregoli

#Font-Size {
    width:14px;
    height:22px;
    cursor:pointer;
    font-size:8px;
}
#Font-Size.img {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 0;
}
#Font-Size.img:hover {
    background:url(../../../Images/TextEditor/buttons.png) no-repeat;
    background-position:0 14;
}

The following CSS shows nothing, even if I specify 'top left' for example.

Update: See the updated JSFiddle thanks to David Fregoli. All that is left to be answered now is how to get the caret to be 9px from the top and 4px from the left and the active to stay active whilst the drop down is open.

I suggest to make a plunkr / jsfiddle version of this, so that others can improve it and post answers to your question in an easier way. :) — holographix
– holographix, Commented Mar 29, 2013 at 13:13
Something on my web site doesn't work. Can I just paste a link to it? — Antony
– Antony, Commented Mar 29, 2013 at 13:13

David Fregoli · Accepted Answer · 2013-03-29 13:20:47Z

3

You only need CSS pseudo selectors

a.img {
   background-image: //img1
}
a.img:hover {
   background-image: //img2
}
a.img:active {
   background-image: //img3
}

edit since you seem to have a single sprite instead of setting background-image you need to set the background-position property

edited Mar 29, 2013 at 13:20

answered Mar 29, 2013 at 13:15

David Fregoli

3,4171 gold badge22 silver badges40 bronze badges

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

3 Comments

user2199660 Over a year ago

This image is not a link, so therefore the a feature will not work. I have now included a JSFiddle into the question. Thanks

David Fregoli Over a year ago

just change the div to a. setting its css display: block will make it behave like a div

user2199660 Over a year ago

Thank you, the initial background and hover images show correctly. Now to just work out how to move the caret 9px from the top and 4px from the left and make the active class show whilst the drop down is open.

Collectives™ on Stack Overflow

How to fix jQuery and CSS problems?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related