Непрозрачность и цветовые переходы для фона? - PullRequest
Новая
       9

Непрозрачность и цветовые переходы для фона?

0 голосов
/ 06 декабря 2018

Я работаю над проектом, включающим заголовок, который появляется на свитке, который имеет панели, которые изменяют непрозрачность и слегка меняют цвет при наведении на них, но не могут перейти на работу в 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 голосов
/ 06 декабря 2018

Чтобы полностью удалить встроенный стиль, вы можете взглянуть на следующее: 

.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>
0 голосов
/ 06 декабря 2018

Проблема в том, что вы тоже дважды устанавливаете стиль .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>

0 голосов
/ 06 декабря 2018

вы почти все делаете правильно!

единственная проблема в том, что встроенный css на самом деле также переопределит псевдокласс ": hover".

поэтому есть два решения этой проблемы;

  1. Вы можете удалить встроенный CSS (как мой фрагмент кода ниже)

ИЛИ

Вы можете просто добавить "! Важное" к своим свойствам в псевдоклассе ": hover".

2-е решения не рекомендуется.так что, надеюсь, вы будете придерживаться 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: 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>
0 голосов
/ 06 декабря 2018

Не используйте встроенный стиль.Я удалил встроенный цвет фона, и он работает просто отлично.

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