2015-12-24 3 views
0

моя проблема странная, но простая. Я получил div с классом navbaritem и по какой-то причине правило перехода применяется к марже, но не к фону.Переход CSS не применяется к фону

Вот HTML и CSS

* { 
 
    font-family: Raleway, Century Gothic; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
header > ul > li { 
 
    margin-bottom: 5vh; 
 
} 
 

 
.navbaritem { 
 
    position: absolute; 
 
    width: 30vw; 
 
    height: 6vh; 
 
    margin-left: -8vw; 
 
    -webkit-transform: skew(-30deg); 
 
    -moz-transform: skew(-30deg); 
 
    -o-transform: skew(-30deg); 
 
    
 
    background: rgb(245,246,246); 
 
    background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0); 
 
    
 
    transition: 0.4s ease; 
 
} 
 

 
.navbaritem:hover { 
 
    margin-left: -3vw; 
 
    transition: 0.4s ease; 
 
} 
 

 
.navbaritem > a { 
 
    height: 80%; 
 
    margin-top: 1%; 
 
    margin-left: -10%; 
 
    width: 90%; 
 
    background: url(../img/graystripes.jpg); 
 
    box-shadow: inset 3vh 1vh 3vh #000; 
 
    -webkit-transform: skew(30deg); 
 
    -moz-transform: skew(30deg); 
 
    -o-transform: skew(30deg); 
 
    position: absolute; 
 
    text-align: center; 
 
    font-size: 4vh; 
 
} 
 

 

 
.navbaritem:hover { 
 
    transition: 0.4s ease; 
 
    
 
    background: rgb(255,0,0); 
 
    background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(247,0,0,1) 21%, rgba(137,0,0,1) 49%, rgba(247,0,0,1) 80%, rgba(255,0,0,1) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(247,0,0,1) 21%,rgba(137,0,0,1) 49%,rgba(247,0,0,1) 80%,rgba(255,0,0,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(247,0,0,1) 21%,rgba(137,0,0,1) 49%,rgba(247,0,0,1) 80%,rgba(255,0,0,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff0000',GradientType=0); 
 
} 
 

 
.navbaritem > i { 
 
    font-size: 5vh; 
 
    color: #444; 
 
    margin-top: 1%; 
 
    margin-left: 85%; 
 
    
 
    -webkit-transform: skew(30deg); 
 
    -moz-transform: skew(30deg); 
 
    -o-transform: skew(30deg); 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="description" content="Offizielle Website von TesseractLabs"> 
 
     <meta name="author" content="Alexander Heuwes"> 
 
     
 
     <title>TesseractLabs | Home</title> 
 
     
 
     <link type="text/css" rel="stylesheet" href="css/style.css"> 
 
     <link type="text/css" rel="stylesheet" href="css/hover.css"> 
 
     <link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
 
     <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"> 
 
     <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900"> 
 

 
     <script src="js/jquery-1.11.3.min.js"></script> 
 
     <script src="js/jquery-migrate-1.2.1.min.js"></script> 
 
     <script src="js/classie.js"></script> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <ul> 
 
       <li> 
 
        <div class="navbaritem"> 
 
         <a href="#">Home</a> 
 
         <i class="fa fa-home"></i> 
 
        </div> 
 
       </li> 
 
       <li> 
 
        <div class="navbaritem"> 
 
         <a href="#">Services</a> 
 
         <i class="fa fa-code"></i> 
 
        </div> 
 
       </li> 
 
       <li> 
 
        <div class="navbaritem"> 
 
         <a href="#">Pricing</a> 
 
         <i class="fa fa-money"></i> 
 
        </div> 
 
       </li> 
 
       <li> 
 
        <div class="navbaritem"> 
 
         <a href="#">References</a> 
 
         <i class="fa fa-flag"></i> 
 
        </div> 
 
       </li> 
 
      </ul> 
 

 
      <!--<div class="navbaritem"> 
 
       <a href="#">Home</a> 
 
       <i class="fa fa-home"></i> 
 
      </div>--> 
 
     </header> 
 
     
 
     <main> 
 

 
     </main> 
 
     
 
     <footer> 
 
      
 
     </footer> 
 
    </body> 
 
</html>

+1

Градиенты, как образы, и поэтому вы не можете перейти непосредственно к ним. Вы можете попробовать некоторые из упомянутых здесь подходов - http://stackoverflow.com/questions/33918470/how-to-animate-gradient-background-smoothly/33938639#33938639 – Harry

ответ

2

Насколько я обеспокоен, вы не можете перейти градиенты. Один из подходов состоял бы в том, чтобы использовать 2 элемента в одной и той же позиции и применять два разных градиента, соответственно. Затем дайте одному элементу непрозрачность 1 (тот, у кого есть градиент, который вы хотите показать по умолчанию), а затем уменьшите непрозрачность этого элемента до 0, а другой - до 1 при зависании. Однако я бы не рекомендовал этого.

EDIT Я нашел обходной путь здесь: Use CSS3 transitions with gradient backgrounds

+1

Спасибо, это сработало! – TheLexoPlexx

+0

Не могли бы вы дать мне отзыв о моем ответе? Работало ли мое решение или связанное с ним обходное решение? :) –

+0

Извините, хотя я прочитал ваш комментарий после редактирования, ваш путь работал, теперь у меня есть 2 divs, один из которых будет непрозрачным: 100% на зависании. – TheLexoPlexx

Смежные вопросы