Selector hover de css no funciona después de usar la función animate

Tengo 4 botones para el juego Simon dice. Quiero que cada vez que tenga el mouse sobre un boton, su opacidad cambie. El problema es que esto sucede solo si el boton no fue animado todavía. Una vez que el boton es animado al azar, ya no cambia mas su opacidad si dejo el mouse quieto sobre el boton.

var arr=[];
var arr2=[];

pushRand();

$("#b1").click(function(){
  
  arr2.push(1);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
       pushRand();
       arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
       alert("You lose :( ..");
       $("button").unbind();    
   }  
});

$("#b2").click(function(){
  
  arr2.push(2);
  if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();    
  }  
});

$("#b3").click(function(){
  
  arr2.push(3);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind();    
   }  
});


$("#b4").click(function(){
  
  arr2.push(4);
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
     alert("You lose :( ..");
     $("button").unbind();    
   }  
});

function pushRand(){  
   var rand=Math.floor(Math.random()*4+1);
   arr.push(rand);
   $("#b"+rand).animate({ opacity: "1" }, 600 ).animate({ opacity: "0.2" }, 600);    
}

function compareArr(a, b) {
    var i = a.length;
    if (i != b.length) return false;
    while (i--) {
        if (a[i] !== b[i]) return false;
    }
    return true;
}
button{
  opacity:0.2;
  height:80px;
  width:80px;
}

button:hover{
  opacity:1; 
}

#b1{  
  background:green;  
}

#b2{  
  background:red;  
}

#b3{  
  background:yellow;  
}

#b4{  
  background:blue;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1"type="button" class="btn">         </button>
<button id="b2"type="button" class="btn">      </button>
<button id="b3" type="button" class="btn">         </button>
<button id="b4" type="button" class="btn">           </button>
2
задан 20.12.2016, 01:56
4 ответа

Проблема, которая у тебя есть, проистекает, в который функция animate он вводит тебе стили inline в твоем коде HTML. Следовательно, как код inline у него есть больший especificidad, чем у селекторов титула (в этом случае button) именно поэтому, когда ты происходишь сверху, он не является кодом CSS, который у тебя есть в hover, потому что стили inline sobrescriben вышеупомянутый код.

Быстрое но очень грязное решение, и которое я не советую тебе полностью, состояло бы в том, чтобы использовать признак !important хотя это признак, который ты был бы должен предотвращать всегда. Всегда намного лучше использовать especificidad CSS.

Поэтому, я буду предлагать тебе альтернативное решение признака !important и в твою функцию animate приводя в пример especificidad CSS.

Для твоего намерения то, что ты можешь реализовывать, состоит в том, чтобы использовать признак animation и использовать keyframes. Я увеличил продолжительность службы (0.6s, что у тебя был в твоем коде в 2s для того, чтобы эффект был виден хорошо).

.transicion{
  animation: animacion 2s;
}

@keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

И позже добавлять класс, соответствующий элементу, который ты хочешь оживить посредством функции addClass:

$("#b"+rand).addClass('transicion');

Следовательно, добавив класс, который просто является оживлением в течение 2s, стили этой не затронут в hover что у тебя есть в каждой из кнопок.

Твой измененный пример:

var arr=[];
var arr2=[];

pushRand();

$("#b1").click(function(){
  
  arr2.push(1);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();  
  }  
});


$("#b2").click(function(){
  arr2.push(2);
  if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
    pushRand();
    arr2=[];
  }
  else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
    alert("You lose :( ..");
    $("button").unbind();    
  }  
});

$("#b3").click(function(){  
  arr2.push(3);
 
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind(); 
   } 
});


$("#b4").click(function(){
  
  arr2.push(4);
   if(compareArr(arr,arr2)&&arr.length===arr2.length){ 
      pushRand();
      arr2=[];
   }
   else if(!compareArr(arr,arr2)&&arr.length===arr2.length){
      alert("You lose :( ..");
      $("button").unbind();  
   }  
});

function pushRand(){
   var rand=Math.floor(Math.random()*4+1);
   arr.push(rand);
   $("#b"+rand).addClass('transicion'); 
}


function compareArr(a, b) {
    var i = a.length;
    if (i != b.length) return false;
    while (i--) {
        if (a[i] !== b[i]) return false;
    }
    return true;
}
button{
  opacity:0.2;
  height:80px;
  width:80px;
}


button:hover{
  opacity:1; 
}

#b1{
  background:green;
}

#b2{ 
  background:red; 
}

#b3{
  background:yellow; 
}

#b4{  
  background:blue;  
}

.transicion{
  animation: animacion 2s;
}
  

@-webkit-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@-moz-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@-o-keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}

@keyframes animacion {
    0% { opacity: 0.2;}
    50% { opacity: 1;}
    100% { opacity: 0.2;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1"type="button" class="btn">         </button>
<button id="b2"type="button" class="btn">      </button>
<button id="b3" type="button" class="btn">         </button>
<button id="b4" type="button" class="btn">           </button>
0
ответ дан 24.11.2019, 11:59

Здесь то, за чем оно последует, состоит, в том, что оживив элемент, ты добавляешь свойство opacity интерактивно, код твоей кнопки остается таким:

<button id="b3" type="button" class="btn" style="opacity: 0.2;">

В то время как те, которые не оживились, остаются такими:

<button id="b2" type="button" class="btn">

Следовательно внешний CSS действует в элементах, у которых нет этого определенного свойства и уважает тех, которые уже считают ее определенной; твой элемент, оживленный в этом случае.

Чтобы менять это поведение он необходим ему внешний CSS говорить в, что наше правило - правило большей важности добавляя !important:

button:hover{
  opacity:1 !important;
}

С этим твой элемент будет вести себя способа, на который ты надеешься, что он это делает.

1
ответ дан 24.11.2019, 11:59

Только aГ±ade !important в тебя css:

button:hover{
  opacity:1 !important;
}
0
ответ дан 24.11.2019, 11:59

Чтобы реализовывать этот тип переходов, я предлагаю тебе отделить каждую часть стилей, в классах. Например, класс для, когда кнопка - с 0.2 из матовости, другой для, когда он находится в 1 и т.д...., так что ты не должен применять прямое оживление с jquery, но ты это сделаешь с css прямо меняя просто класс, которому принадлежит кнопка, что выбор, чтобы реализовывать оживление. Ты можешь делать это добавляя к кнопке свойство transition следующей формы:

button {
    ...
    transition: opacity 600ms;
    ...
}

Он говорит это ему в браузер, что ты хочешь, что матовость, каждый раз, когда он изменился, что это сделал переходно во времени 600 миллисекунд.

0
ответ дан 24.11.2019, 11:59