Question

我正在尝试使用超级简单的css进行悬停效果，但我正在寻找一些东西，我试图让用户能够将鼠标悬停在一个按钮上，并且应用了不透明度的浅白色。但每当我这样做时，我的按钮边框消失，我知道这是因为我的目标是按钮元素。那么，如果不针对按钮元素并且仍然保持边框不会消失，这是如何工作的。我的jsfiddle链接在下面。

https://jsfiddle.net/bvcxtds/6Lr501g1/

这是我的标记

<button><a>SIGN UP</a></button>

和我的css

button {
    border: 1px solid white;
    background: none;
    border-radius: 25px;
    width: 150px;
}
button > a {
    color: white;
}

button:hover {
    opacity: 0.2;
    background: white;
}
body {
    background: black;
}

Answer 1

不透明度适用于整个元素，而不仅仅是背景。边框实际上并没有消失，它变成了与背景相同的颜色。

使用带有alpha值的背景颜色：

button:hover {
  background: rgba(255,255,255,0.2);
}

演示：https://jsfiddle.net/6Lr501g1/1/

Answer 2

替换＆＃39;背景＆＃39;为了＆＃39; color＆＃39;：

button:hover {
  opacity: 0.2;
  color: white;
}

Answer 3

小改变a和按钮

button {
    border: 1px solid white;
    background: none;
    border-radius: 25px;
    width: 150px;
}
button a{
    color:#FFF
}



button:hover {
    opacity: .5;
    background: white;
}
button:hover a{
    color: #060606;
  opacity: 1;
}
body {
    background: black;
}

JSFiddel

CSS按钮悬停效果不起作用

3 个答案: