背景的不透明度和颜色过渡？

Question

我正在做一个涉及 header 的项目，它出现在滚动条上，当你将鼠标悬停在它们上面时，它的面板会改变不透明度和轻微的颜色，但无法在 [=24] 中工作=] 或 Firefox.

.revundhov:hover {
  background-color: rgba(238, 236, 236, 0.4);
  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
}

.revundhov {
  background-color: rgba(25, 31, 40, 0.9);
  transition: background-color 0.2s ease-out;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
}

<body style='background-color: blue;'>


  <div id='transhead' style='box-shadow: 1px 2px 4px rgba(0, 0, 0, .9); height: 100px; max-height: 100vh; overflow: hidden; position: fixed; top:0; left: 0; z-index: 10000;  width: 100%; '>
    <a href='/dxlphin/'>
      <div style='width: 100vw; height: 100%;  display: flex; align-items: center; justify-content:left'>
        <div class='revundhov' style='background-color: rgba(238, 236, 236, 0.9); width: 5vw; height: 100%;'>HOME</div>
        <div class='revundhov' style='background-color: rgba(238, 236, 236, 0.9); width: 30vw; height: 100%;'>Products</div>
        <div class='revundhov' style='background-color: rgba(238, 236, 236, 0.9); width: 30vw; height: 100%;'>Ranges</div>
        <div class='revundhov' style='background-color: rgba(238, 236, 236, 0.9); width: 30vw; height: 100%;'>Featured</div>
        <div class='revundhov' style='background-color: rgba(238, 236, 236, 0.9); width: 5vw; height: 100%;'>CART</div>
      </div>

  </div>

</body>

如有任何错误建议，我们将不胜感激。

谢谢。

Answer 1

不要使用内联样式。我已经删除了内联背景颜色，它工作得很好。

.revundhov:hover {
  background-color: rgba(238, 236, 236, 0.4);
  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
}

.revundhov {
  background-color: rgba(25, 31, 40, 0.9);
  transition: background-color 0.2s ease-out;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
}

<body style='background-color: blue;'>


  <div id='transhead' style='box-shadow: 1px 2px 4px rgba(0, 0, 0, .9); height: 100px; max-height: 100vh; overflow: hidden; position: fixed; top:0; left: 0; z-index: 10000;  width: 100%; '>
    <a href='/dxlphin/'>
      <div style='width: 100vw; height: 100%;  display: flex; align-items: center; justify-content:left'>
        <div class='revundhov' style='width: 5vw; height: 100%;'>HOME</div>
        <div class='revundhov' style=' width: 30vw; height: 100%;'>Products</div>
        <div class='revundhov' style=' width: 30vw; height: 100%;'>Ranges</div>
        <div class='revundhov' style=' width: 30vw; height: 100%;'>Featured</div>
        <div class='revundhov' style='width: 5vw; height: 100%;'>CART</div>
      </div>

  </div>

</body>

Answer 2

问题是你也设置了两次样式.revundhov，你所要做的就是删除style='background-color: rgba(238, 236, 236, 0.9); width: 5vw; height: 100%;' 来自 .html 并将其添加到您的 .css 文件

.revundhov:hover {
background-color: rgba(238, 236, 236, 0.4);
transition: background-color 0.3s ease-out;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
}

.revundhov {
background-color: rgba(25, 31, 40, 0.9);
transition: background-color 0.2s ease-out;
-webkit-transition: background-color .2s;
-o-transition: background-color .2s;
background-color: rgba(238, 236, 236, 0.9); 
width: 5vw; 
height: 100%;
}   
<body style='background-color: blue;'>
<div id='transhead' style='box-shadow: 1px 2px 4px rgba(0, 0, 0, .9); height:     100px; max-height: 100vh; overflow: hidden; position: fixed; top:0; left: 0; z-index: 10000;  width: 100%; '>
<a href='/dxlphin/'>
  <div style='width: 100vw; height: 100%;  display: flex; align-items: center; justify-content:left'>
    <div class='revundhov'>HOME</div>
    <div class='revundhov'>Products</div>
    <div class='revundhov'>Ranges</div>
    <div class='revundhov'>Featured</div>
    <div class='revundhov'>CART</div>
  </div>

Answer 3

你几乎做对了！

唯一的问题是，内联 css 实际上也会覆盖“:hover”伪 class。

所以，这个问题有两种解决方案；

你可以删除内联 css（就像我下面的片段）

或

您可以在“:hover”伪 class.

不推荐第二种方案。所以希望你会坚持第一个解决方案（检查我的片段）

祝你有愉快的一天！

.revundhov:hover {
  background-color: rgba(238, 236, 236, 0.4);
  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
}

.revundhov {
  background-color: rgba(25, 31, 40, 0.9);
  transition: background-color 0.2s ease-out;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
}

<body style='background-color: blue;'>


  <div id='transhead' style='box-shadow: 1px 2px 4px rgba(0, 0, 0, .9); height: 100px; max-height: 100vh; overflow: hidden; position: fixed; top:0; left: 0; z-index: 10000;  width: 100%; '>
    <a href='/dxlphin/'>
      <div style='width: 100vw; height: 100%;  display: flex; align-items: center; justify-content:left'>
        <div class='revundhov' style='width: 30vw; height: 100%;'>HOME</div>
        <div class='revundhov' style='width: 30vw; height: 100%;'>Products</div>
        <div class='revundhov' style='width: 30vw; height: 100%;'>Ranges</div>
        <div class='revundhov' style='width: 30vw; height: 100%;'>Featured</div>
        <div class='revundhov' style='width: 30vw; height: 100%;'>CART</div>
      </div>

  </div>

</body>

Answer 4

要完全删除内联样式，您可以查看以下内容：

.revundhov:hover {
  background-color: rgba(238, 236, 236, 0.4);
  transition: background-color 0.3s ease-out;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
}

.revundhov {
  background-color: rgba(25, 31, 40, 0.9);
  transition: background-color 0.2s ease-out;
  -webkit-transition: background-color .2s;
  -o-transition: background-color .2s;
  height: 100%;
  width: 30vw;
}

.revundhov:first-of-type, .revundhov:last-of-type {
  width: 5vw;
}

body {
  background: blue;
}

#transhead {
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .9); 
  height: 100px; 
  max-height: 100vh; 
  overflow: hidden; 
  position: fixed; 
  top:0; 
  left: 0; 
  z-index: 10000;  
  width: 100%;
}

.container {
  width: 100vw; 
  height: 100%;  
  display: flex; 
  align-items: center; 
  justify-content:left
}

<body>
  <div id='transhead'>
    <a href='/dxlphin/'>
      <div class="container">
        <div class='revundhov'>HOME</div>
        <div class='revundhov'>Products</div>
        <div class='revundhov'>Ranges</div>
        <div class='revundhov'>Featured</div>
        <div class='revundhov'>CART</div>
      </div>
    </a><!-- FIX HTML markup -->
  </div>

</body>

背景的不透明度和颜色过渡？

Opacity and colour transitions for backgrounds?

html

css

transition

display