Using CSS to make pagination text images that change when clicked

Permalink Browser Info Environment
I have edited the CSS to have images instead of text for pagination. I am trying to code it so that if clicked, or slected, a different image will appear so as to notify you which slide you are viewing. I have successfully done this, however I am trying to add circles. The selected image (or what appears when selected) is a circle. However, when not selected, the circle is a square. Anyone have any ideas? Below is the CSS I am using.

.powerSliderPagination { }

.powerSliderPagination a {
background:url('http://www.tjrcomputersolutions.com/c5subdomain-testing/themes/foothills/images/slider/unselected.gif') no-repeat;
width:18px;
height:20px;
color: #000000;
text-indent:-9999px;
border:0;
padding-right:1px;
z-index:1001;
margin-left:10px;
}

.powerSliderPagination a:hover, .powerSliderPagination a.activeSlide { background:url('http://www.tjrcomputersolutions.com/c5subdomain-testing/themes/foothills/images/slider/selected.gif')no-repeat}

This ocde went straight into the style.css file for the plugin. Again, mostly works, but the unselected.gif (which is a circle) shows up as a square. Thanks!

Type: Discussion
Status: New
Atreu
View Replies:
onemhz replied on at Permalink Reply
onemhz
I saw its working, but maybe you should add to hover

.powerSliderPagination a.activeSlide:hover

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.