Question

我有两个框，当你将鼠标悬停在上面时，背景不透明度应该会改变，但前景文字的不透明度不应该改变。我知道解决方法是悬停，将rgba设置为背景颜色并添加不透明度。例如：

#join:hover {
    rgba(0, 102, 255, .4)
}

然而，问题是在jquery中，每个框的背景在单击时会发生变化，因此使用纯色和特定颜色不是一种选择。我只想使用不透明度：.4 ，这样无论每个框的背景颜色如何，不透明度都是相同的。

当我在悬停时使用不透明度时，每个框中文本的不透明度也会发生变化。为了解决这个问题，我尝试使用z-index / position：relative并将文本（#join-text, #learn-text）设置为更高的z-index，将背景（#join, #learn）设置为更小的z-index。这没有得到正确的结果。

我也尝试使用类::before之类的伪类#join:hover::before但是也没有呈现正确的结果，position:absolute改变了按钮的位置。

使用opacity: .4属性，是否有办法仅在悬停时更改悬停的不透明度？任何投入将不胜感激。

在此处查找代码：https://jsfiddle.net/Lsqjwu15/1/

Answer 1

您可以使用CSS3 :before选择器

#join:before {
    background: #0066ff; 
}

#learn:before {
    background: #ffb31a; 
}

.rectangle:before {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
}

.rectangle:hover:before {
  opacity: .4;
}

JSFiddle

Answer 2

您可以使用伪元素进行解决方法（更改“连接”框）：

.rectangle {
    position:relative;
	height: 200px;
	width: 80px;
	border: 1px solid transparent;
}

#join:before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
	background: #0066ff; 
}

#learn {
	background: #ffb31a; 
}

#join:hover:before,
#learn:hover {
  opacity: .4;
}

.vertical {
	text-align: center;
	color: #000000;
	font-size: 30px;
	font-weight: bold;
	white-space: nowrap;
	transform: rotate(-90deg);
}

#join-text {
	 margin-top: 110px;  
}

#learn-text {
	 margin-top: 125px;   
}

<div class="rectangle" id="join">
  <div class="vertical" id="join-text">
    Join Here
  </div>
</div>

<div class="rectangle" id="learn">
  <div class="vertical" id="learn-text">
    Learn More
  </div>
</div>

Answer 3

你可以制作文字＆＃34; rgba（0,0,0,1）！important＆＃34;覆盖背景不透明度？那还会随着背景而消失吗？

Answer 4

然而，问题在于，在jquery中，每个框的背景在单击时会发生变化，因此使用纯色和特定颜色不是一种选择。

您尚未指定背景颜色如何更改或最初是什么，但使用RGBA颜色似乎足够简单。 JQ非常有能力处理RGBA。

.rectangle {
  height: 200px;
  width: 80px;
  border: 1px solid transparent;
}
#join {
  background: rgba(0, 102, 255, 1)
}
#learn {
  background: rgba(255, 179, 26, 1)
}
#join:hover {
  background: rgba(0, 102, 255, .4)
}
#learn:hover {
  background: rgba(255, 179, 26, .4)
}
.vertical {
  text-align: center;
  color: #000000;
  font-size: 30px;
  font-weight: bold;
  white-space: nowrap;
  transform: rotate(-90deg);
}
#join-text {
  margin-top: 110px;
}
#learn-text {
  margin-top: 125px;
}

<div class="rectangle" id="join">
  <div class="vertical" id="join-text">
    Join Here
  </div>
</div>

<div class="rectangle" id="learn">
  <div class="vertical" id="learn-text">
    Learn More
  </div>
</div>

如果您还没有告诉我们其他内容，那么如果您想要一个代码解决方案，那么您将不得不重现完全问题，包括JS / JQ

仅使用＆＃34;不透明度＆＃34;而不是＆＃34; RGBA＆＃34;更改背景不透明度

4 个答案: