Question

I currently have a very basic JQuery script accompanied by some CSS that helps create a smooth fading effect for when someone hovers over a product image on my site. What Id like to be able to do however is allow users that have Javascript disabled to still get a basic show/hide hover effect via CSS only. How might this be accomplished?
Thanks

Here is what I currently have going to give you an idea:

HTML

<li>
<a href="<?php the_permalink(); ?>" class="product_view_sm">..View Item..</a>
<?php the_post_thumbnail('prod-img-sm', array('class' => 'single_product_img_sm', 'alt' => 'View Product')); ?>
</li>

CSS

ul.product_list_sm li {
    overflow: hidden;
    width: 192px;
    height: 192px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
    position: relative;
}

a.product_view_sm { 
    font-family: aaaiightRegular;
    font-size: 15px;
    font-weight: normal;
    color: #000000;
    background: url(images/epr_store_product_overlay.png) no-repeat;
    width: 184px;
    height: 59px;
    padding: 125px 0px 0px 0px;
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    text-align: center;
    z-index: 200;
}

img.single_product_img_sm { 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
}

JQuery

// Fade anchor graphic in on hover for small products
$(document).ready(function() { 
    $('a.product_view_sm').css("opacity","0");
    $('.product_list_sm li').hover(
        function(){
            $(this).find('a.product_view_sm').animate({
                opacity: 1
            }, 250);
        },
        function(){
            $(this).find('a.product_view_sm').animate({
                opacity: 0
            }, 250);
        }
    );
});

Answer 1

Based on your javascript, this should do the same thing without the animation

a.product_view_sm { opacity: 0; }
.product_list_sm li:hover a.product_view_sm { opacity: 1; }