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!
.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 |
.powerSliderPagination a.activeSlide:hover