jquery - 从 jQuery 动画 Div 中排除文本

Question

我正在使用 joomla 构建一个网站，并且最近添加了一个 jQuery 模块，当您将鼠标悬停在包含的 div 上时，该模块会更改它的不透明度。它包含文本，并且文本看起来有点俗气，因为它也失去了不透明度。所以我想知道如何定位 div，但排除文本，以便文本保持 100% 不透明度。

这是我的代码:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>    
<script>jQuery.noConflict();
    jQuery(document).ready(function() { 
      //settings 
      var opacity = 0.5, toOpacity = 1, duration = 350; 
      //set opacity ASAP and events 
      jQuery('.opacity').css('opacity',opacity).hover(function() { 
          jQuery(this).fadeTo(duration,toOpacity); 
        }, function() { 
          jQuery(this).fadeTo(duration,opacity); 
        } 
      ); 
    });
</script>

Answer 1

我尝试使用 CSS 来更改容器的不透明度，同时保持完全不透明的子级，但不幸的是，我得出的结论是这是不可能的。

我建议你做的是将两个 div 放置在同一位置，但仅对用作背景层的一个 div 进行不透明度动画。