CSS过渡不透明度不受rgba颜色影响[重复]
Posted
技术标签:
【中文标题】CSS过渡不透明度不受rgba颜色影响[重复]【英文标题】：CSS Transition opacity not effecting with rgba color [duplicate] 【发布时间】：2020-07-14 00:39:28 【问题描述】：为什么opacity 转换不会影响hover，如果我只是在文本.4 中单独放置不透明度class 它可以工作，但它不适用于rgba opacity。
ul
list-style:none
li
padding-bottom:15px;
.text
color:rgba(13,19,13,.4); // here is initial opacity .4
transition: opacity 2s cubic-bezier(.4,1,.2,1);
.text:hover
opacity:.9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
</ul>
</body>
</html>【问题讨论】：
这个元素<href=""a />是什么意思？
颜色不透明度和你混合的不透明度有区别
更改实际 rgba 值的不透明度/alpha...
【参考方案1】：
只使用opacity 而不是color opacity
ul
list-style: none
li
padding-bottom: 15px;
.text
opacity: .4;
transition: opacity 2s cubic-bezier(.4, 1, .2, 1);
.text:hover
opacity: .9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
</ul>
</body>
</html>使用coloropacity
ul
list-style: none
li
padding-bottom: 15px;
.text
color: rgba(13, 19, 13, .4);
transition: color 2s cubic-bezier(.4, 1, .2, 1);
.text:hover
color: rgba(13, 19, 13, .9);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
<li>
<href="" a /><span class="text">Item</span></li>
</ul>
</body>
</html>【讨论】：
看起来你的演示不工作，我没有看到悬停的任何过渡效果。 @jsduniya 抱歉，我不记得在彩色 rgba 悬停情况下将不透明度过渡更改为颜色，请更新我的答案【参考方案2】：在转换时使用color 属性，在:hover 上使用color:rgba(13,19,13,0.9);
ul
list-style:none
li
padding-bottom:15px;
.text
color:rgba(13,19,13,0.4);
transition: color 2s cubic-bezier(.4,1,.2,1);
.text:hover
color:rgba(13,19,13,0.9);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
<li><a href="#" /><span class="text">Item</span></li>
</ul>
</body>
</html>【讨论】：
【参考方案3】：这是解决方案，在 .text 类中为不透明度提供单独的属性。
ul
list-style:none
li
padding-bottom:15px;
.text
color:rgba(13,19,13,0.4);
transition: opacity 2s cubic-bezier(.4,1,.2,1);
.text:hover
cursor:pointer;
color:rgba(13,19,13,0.9);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><href=""a /><span class="text">Item</span></li>
<li><href=""a /><span class="text">Item</span></li>
<li><href=""a /><span class="text">Item</span></li>
<li><href=""a /><span class="text">Item</span></li>
<li><href=""a /><span class="text">Item</span></li>
</ul>
</body>
</html>【讨论】：
感谢您的回答，但是，我是说我已经在我的问题中提到过这项工作，我想知道为什么它不适用于 rgba 不透明度。 我已经编辑了我的解决方案 如果您在文本类中赋予颜色不透明度并在 .hover 状态下更改元素不透明度，我将无法工作 所以你必须使用上面我的sn-ps中显示的任何方法【参考方案4】：您需要设置color 进行转换，一旦您更改颜色属性中的不透明度
ul
list-style:none
li
padding-bottom:15px;
font-size: 2em;
.text
color:rgba(13,19,13,.4);
transition: color 2s cubic-bezier(.4,1,.2,1);
.text:hover
color: rgba(13,119,13,.9);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a href=""><span class="text">Item</span></a></li>
<li><a href=""><span class="text">Item</span></a></li>
<li><a href=""><span class="text">Item</span></a></li>
<li><a href=""><span class="text">Item</span></a></li>
<li><a href=""><span class="text">Item</span></a></li>
</ul>
</body>
</html>【讨论】：
以上是关于CSS过渡不透明度不受rgba颜色影响[重复]的主要内容，如果未能解决你的问题，请参考以下文章