为什么悬停效果不透明度在构建后不起作用

Question

我在链接中嵌套的按钮上有一个简单的悬停效果。这是按钮：

<Link to={`/product/${product._id}`} >
<button  className='btn-4'>View </button>
</Link>

这是它的css：

.btn-4 {
padding: 10px;
width: 40%;
border: none;
background-color: var(--drk-black);
color: var(--light-grey-2);
font-size: 18px;
text-transform: uppercase;
letter-spacing: var(--spacing);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 0;
}
.btn-4:hover {
opacity: 50%;
cursor: pointer;
}

它在localhost上正常工作，但不透明度在构建后没有改变，但光标变成了指针。有人能向我解释一下为什么会发生这种事吗？

Answer 1

多亏了这个答案，我才得以解决这个问题：不透明度百分比更改为1%所以我最终将不透明度从50%改为0.5。