CSS过渡不透明度不影响RGBA颜色[重复]

Question

为什么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>

Answer 1

一旦更改颜色属性内的不透明度，您需要设置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>

Answer 2

这里是解决方案，在.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>

Answer 3

在过渡上使用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>

Answer 4

仅使用opacity而不是color不透明度

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>

使用color opacity
 
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>

CSS过渡不透明度不影响RGBA颜色[重复]

问题描述投票：0回答：4

4个回答

最新问题

CSS过渡不透明度不影响RGBA颜色[重复]

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4