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

时间：2018-12-06 17:43:07

标签： html css css3 transition display

我正在处理一个项目，该项目涉及一个出现在滚动条上的标题，该标题的面板在将鼠标悬停在其上时会更改不透明度和略微颜色，但是无法在Chrome或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>

任何关于出问题的建议将不胜感激。

谢谢。

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

问题是您也设置了两次样式。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>

答案 2 :(得分：0)

您几乎做对了！

唯一的问题是，内联css实际上还将覆盖“：hover”伪类。

因此，针对此问题有两种解决方案；

  1. 您可以删除嵌入式CSS（例如下面的代码段）

OR

  1. 您只需在“：hover”伪类中将“！important”添加到属性中即可。

不建议使用第二种解决方案。所以希望您会坚持使用第一种解决方案（请检查我的代码段）

祝你有美好的一天！

.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>

答案 3 :(得分：0)

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

.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>

相关问题
最新问题