Question

当人们点击链接（不在div内）时，我需要能够改变div的不透明度。所以我将不透明度设置为开始，然后在我的脚本中根据需要进行更改。

这是我的初始设置：

$('#config-title5a').css('background', '#ccc url(http://www.configureyourlaser.com/images/gradient.png) repeat-x 0 -10px').css({ opacity: 0.3 });
$('a#coolingtip').css({ opacity: 1.0});

a#coolingtip是div中的锚点，称为#config-title5a。目前，此脚本会更改所有内容的不透明度。如何将不透明度更改应用于div，而不是div中的锚标记？

这是HTML：

<div id="config-title5">
Wavelength</div>
<div id="config-title5a">
<a id="wavelengthtip" title="Wavelength" href="<?php echo base_url(); ?>application/views/tooltips/wavelengthtip.php" rel="<?php echo base_url(); ?>application/views/tooltips/wavelengthtip.php">Learn More ›</a></div>

Answer 1

我相信如果你在父（封闭）元素上设置不透明度，它将影响所有的孩子。

解决这个问题的一种方法可能是将一个绝对定位的图层添加到div（不透明度图层），其深度小于您的子元素。

例如：

<div class="parent">
  <div class="child-elements">
      // this is the stuff that should remain visible
  </div>
  <div class="opacity-layer"></div>
</div>

您的CSS可能如下所示：

.parent {
  position:relative;
}

.opacity-layer {
  position:absolute;
  /* your opacity settings here */
}

.child-elements {
}

Answer 2

快速回答是你做不到的。在元素上设置不透明度意味着任何子元素不透明度都会受到影响。

也许您可以在其他子元素上设置不透明度，如下所示：

$('#config-title5a *:not(#coolingtip)').css({
    'opacity': '0.3'
});

$('#config-title5a').css({
    'background': '#ccc url(http://www.configureyourlaser.com/images/gradient.png) repeat-x 0 -10px'
});

Answer 3

http://jsfiddle.net/L75Ps/1/

$("#config-title5a").css({opacity:0});

var link = $("a#coolingtip").detach();
$("#config-title5a").after(link);

jQuery：在div上设置不透明度但不适用于div中的锚标记

3 个答案: