Javascript 在淡出背景的同时保持文本完全不透明度

如何使文本保持完全不透明度，同时淡出背景

我需要得到一个可读的文本，但在鼠标翻转时背景会褪色。我找到了像“框”或“文本框”这样的解决方案，但它不起作用

Javascript:

$(document).ready(function () {
    // valore iniziale del fade sull'immagine a riposo 
    $(".fade").fadeTo(0, 0.6);

    $(".fade").hover(function () {
        // valore del fade sull'immagine con mouse hover 
        $(this).fadeTo("fast", 0.8);
    },
    function () {
        // ritorno al valore iniziale del fade con mouse out 
        $(this).fadeTo("fast", 0.6);
    });
});

CSS:

HTML:

文本区

我认为，无论发生什么情况，具有淡入淡出效果的元素中的所有内容都将淡入淡出。至少我从来没有运气让它工作。。。我将尝试使它们成为两个不同的绝对位置元素，其中包含文本的元素具有更高的z索引。使它们的大小相同，并使包含文本的元素上的onmouseover使包含背景的元素褪色。如果使用css:hover，则只需使用onmouseover/onmouseout更改元素类即可实现悬停效果。

#content {
    position: relative;
    width: 100%;
}

#content > ul > li {
    position: absolute;
    width: 100%;
}

#content > ul > li > div {
    overflow: hidden;
    background: url(../images/pages_bg2.png);
    height: 100%;
}

<article id="content"> Text Area </article>