Нужна помощь в создании этого простого сценария наведения изображения JQuery вместо CSS только в том случае, если отключен JavaScript

Question

В настоящее время у меня есть очень простой скрипт JQuery, сопровождаемый некоторыми CSS, которые помогают создать плавный эффект затухания, когда кто-то наводит курсор мыши на изображение продукта на моем сайте.Однако я хотел бы позволить пользователям, у которых отключен Javascript, по-прежнему получать базовый эффект наведения / скрытия при наведении только через CSS.Как это можно сделать?
Спасибо

Вот то, что я сейчас собираюсь дать вам идею:

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

Исходя из вашего JavaScript, это должно делать то же самое без анимации

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