Skip to main content
removeu 56 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Neste caso, você deveria usar uma função recursiva com setTimeout() e usartrocar o método .queuedelay() também com outro setTimeout() para remover o atributo style do elemento e chamar a função novamente. O .queue() servirá como um callback do .delay() para poder chamar a função novamente após 3 segundos. Se você não remover o atributo style criado pelo jQuery, irá anular o :hover do CSS.

(function rand(){
   
   var arr = jQuery('.scenario a');
   var ran = Math.floor(Math.random() * arr.length-1) + 1;
   
   jQuery(arr[ran])
   .css("opacity", "1");
   .delaysetTimeout(500function(){
   .queue(function(){   
      $jQuery(thisarr[ran])
      .removeAttr("style");
      setTimeout(rand, 3000);
      
   }, 500);
   
})();
.scenario {

  position: relative;
  margin: auto;
  height: 1120px;
  background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/fundo_pascoa_1_1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -1px;
  border-radius: 10px;
}

.scenario a {
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 4.53%;
    top: 49.61%;
    width: 2.7%;
    height: 5.1%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.scenario a:hover {
    opacity: 1;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 72.95%;
    top: 59.35%;
    width: 3.32%;
    height: 3.64%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}

.scenario a+a:hover {
    opacity: 1;
    /* background-color: rgba(0, 255, 0, .5); */
}

.scenario a+a+a {
    border-radius: 50%;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 13.92%; 
    top: 69.83%; 
    width: 4.77%; 
    height: 6.15%; 
    z-index: 2;

}

.scenario a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 50.92%;
    top: 58.78%;
    width: 5.45%;
    height: 5.91%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);

}

.scenario a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 76.29%; 
    top: 65.99%; 
    width: 4.13%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}

.scenario a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 83.9%; 
    top: 51.77%; 
    width: 3.56%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 18.01%; 
    top: 53.82%; 
    width: 4.21%; 
    height: 5.91%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);

}

.scenario a+a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 66.1%; 
    top: 47.94%; 
    width: 3.16%; 
    height: 3.97%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a+a+a:hover {
    opacity: 1;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenario">
   <div class="happy-easter">
      <img src="{{media url="wysiwyg/Paginas/pascoa/Logo_pascoa_1.png"}}" alt="" />
   </div>
   <a href="#openModal" title="Cupom 5OFF Páscoa"></a>
   <a href="#openModal2" title="Cupom 10OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal5" title="Cupom Passarinho"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
</div>

Neste caso, você deveria usar uma função recursiva com setTimeout() e usar o método .queue() para remover o atributo style do elemento e chamar a função novamente. O .queue() servirá como um callback do .delay() para poder chamar a função novamente após 3 segundos. Se você não remover o atributo style criado pelo jQuery, irá anular o :hover do CSS.

(function rand(){
   
   var arr = jQuery('.scenario a');
   var ran = Math.floor(Math.random() * arr.length-1) + 1;
   
   jQuery(arr[ran])
   .css("opacity", "1")
   .delay(500)
   .queue(function(){
      $(this)
      .removeAttr("style");
      setTimeout(rand, 3000);
   });
   
})();
.scenario {

  position: relative;
  margin: auto;
  height: 1120px;
  background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/fundo_pascoa_1_1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -1px;
  border-radius: 10px;
}

.scenario a {
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 4.53%;
    top: 49.61%;
    width: 2.7%;
    height: 5.1%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.scenario a:hover {
    opacity: 1;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 72.95%;
    top: 59.35%;
    width: 3.32%;
    height: 3.64%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}

.scenario a+a:hover {
    opacity: 1;
    /* background-color: rgba(0, 255, 0, .5); */
}

.scenario a+a+a {
    border-radius: 50%;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 13.92%; 
    top: 69.83%; 
    width: 4.77%; 
    height: 6.15%; 
    z-index: 2;

}

.scenario a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 50.92%;
    top: 58.78%;
    width: 5.45%;
    height: 5.91%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);

}

.scenario a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 76.29%; 
    top: 65.99%; 
    width: 4.13%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}

.scenario a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 83.9%; 
    top: 51.77%; 
    width: 3.56%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 18.01%; 
    top: 53.82%; 
    width: 4.21%; 
    height: 5.91%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);

}

.scenario a+a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 66.1%; 
    top: 47.94%; 
    width: 3.16%; 
    height: 3.97%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a+a+a:hover {
    opacity: 1;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenario">
   <div class="happy-easter">
      <img src="{{media url="wysiwyg/Paginas/pascoa/Logo_pascoa_1.png"}}" alt="" />
   </div>
   <a href="#openModal" title="Cupom 5OFF Páscoa"></a>
   <a href="#openModal2" title="Cupom 10OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal5" title="Cupom Passarinho"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
</div>

Neste caso, você deveria usar uma função recursiva com setTimeout() e trocar o .delay() também com outro setTimeout() para remover o atributo style do elemento e chamar a função novamente. Se você não remover o atributo style criado pelo jQuery, irá anular o :hover do CSS.

(function rand(){
   
   var arr = jQuery('.scenario a');
   var ran = Math.floor(Math.random() * arr.length-1) + 1;
   
   jQuery(arr[ran])
   .css("opacity", "1");
   setTimeout(function(){
      
      jQuery(arr[ran])
      .removeAttr("style");
      setTimeout(rand, 3000);
      
   }, 500);
   
})();
.scenario {

  position: relative;
  margin: auto;
  height: 1120px;
  background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/fundo_pascoa_1_1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -1px;
  border-radius: 10px;
}

.scenario a {
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 4.53%;
    top: 49.61%;
    width: 2.7%;
    height: 5.1%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.scenario a:hover {
    opacity: 1;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 72.95%;
    top: 59.35%;
    width: 3.32%;
    height: 3.64%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}

.scenario a+a:hover {
    opacity: 1;
    /* background-color: rgba(0, 255, 0, .5); */
}

.scenario a+a+a {
    border-radius: 50%;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 13.92%; 
    top: 69.83%; 
    width: 4.77%; 
    height: 6.15%; 
    z-index: 2;

}

.scenario a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 50.92%;
    top: 58.78%;
    width: 5.45%;
    height: 5.91%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);

}

.scenario a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 76.29%; 
    top: 65.99%; 
    width: 4.13%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}

.scenario a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 83.9%; 
    top: 51.77%; 
    width: 3.56%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 18.01%; 
    top: 53.82%; 
    width: 4.21%; 
    height: 5.91%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);

}

.scenario a+a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 66.1%; 
    top: 47.94%; 
    width: 3.16%; 
    height: 3.97%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a+a+a:hover {
    opacity: 1;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenario">
   <div class="happy-easter">
      <img src="{{media url="wysiwyg/Paginas/pascoa/Logo_pascoa_1.png"}}" alt="" />
   </div>
   <a href="#openModal" title="Cupom 5OFF Páscoa"></a>
   <a href="#openModal2" title="Cupom 10OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal5" title="Cupom Passarinho"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
</div>
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Não use setInterval() para isso porque não vai haver sincronia com o tempo do .delay(), mas o principal problema (além de outros) é que o CSS só aplica o background com :hover, e isso não acontece no script jQuery.

Além do que você tem apenas 8 elementos <a> na div, e o arr[9] supostamente iria pegar o décimo elemento, que não existe. Além do que daria erro, porque arr[9] não é um objeto jQuery para aplicar os métodos .show(), .delay() e .hide(). Também usar .show() e .hide() não seria o correto, porque o que se deseja é alterar o opacity dos elementos e não o display deles.

O que tem que fazer é colocar os backgrounds dos elementos nos estilos dos elementos, e não na pseudo-classe :hover. O :hover deve ser usado apenas para alterar o opacity.

Outra coisa é que você não está gerando um número aleatório. É preciso gerar um número aleatório de 0 até a quantidade de elementos -1, que ficaria:

var ran = Math.floor(Math.random() * arr.length-1) + 1;

E aplicar o valor da variável ran no índice do seletor correto, que seria:

var arr = jQuery('.scenario a');

E usar como objeto jQuery:

jQuery(arr[ran])

Neste caso, você deveria usar uma função recursiva com setTimeout() e usar o método .queue() para remover o atributo style do elemento e chamar a função novamente. O .queue() servirá como um callback do .delay() para poder chamar a função novamente após 3 segundos. Se você não remover o atributo style criado pelo jQuery, irá anular o :hover do CSS.

Ficaria tudo assim:

(function rand(){
   
   var arr = jQuery('.scenario a');
   var ran = Math.floor(Math.random() * arr.length-1) + 1;
   
   jQuery(arr[ran])
   .css("opacity", "1")
   .delay(500)
   .queue(function(){
      $(this)
      .removeAttr("style");
      setTimeout(rand, 3000);
   });
   
})();
.scenario {

  position: relative;
  margin: auto;
  height: 1120px;
  background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/fundo_pascoa_1_1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -1px;
  border-radius: 10px;
}

.scenario a {
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 4.53%;
    top: 49.61%;
    width: 2.7%;
    height: 5.1%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.scenario a:hover {
    opacity: 1;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 72.95%;
    top: 59.35%;
    width: 3.32%;
    height: 3.64%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}

.scenario a+a:hover {
    opacity: 1;
    /* background-color: rgba(0, 255, 0, .5); */
}

.scenario a+a+a {
    border-radius: 50%;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 13.92%; 
    top: 69.83%; 
    width: 4.77%; 
    height: 6.15%; 
    z-index: 2;

}

.scenario a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute;
    left: 50.92%;
    top: 58.78%;
    width: 5.45%;
    height: 5.91%;
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);

}

.scenario a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 76.29%; 
    top: 65.99%; 
    width: 4.13%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}

.scenario a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 83.9%; 
    top: 51.77%; 
    width: 3.56%; 
    height: 4.78%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 18.01%; 
    top: 53.82%; 
    width: 4.21%; 
    height: 5.91%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);

}

.scenario a+a+a+a+a+a+a:hover {
    opacity: 1;

}

.scenario a+a+a+a+a+a+a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
    -webkit-filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgba( 255, 255, 255, 0.55));
    position: absolute; 
    left: 66.1%; 
    top: 47.94%; 
    width: 3.16%; 
    height: 3.97%; 
    z-index: 2;
    background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);

}

.scenario a+a+a+a+a+a+a+a:hover {
    opacity: 1;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenario">
   <div class="happy-easter">
      <img src="{{media url="wysiwyg/Paginas/pascoa/Logo_pascoa_1.png"}}" alt="" />
   </div>
   <a href="#openModal" title="Cupom 5OFF Páscoa"></a>
   <a href="#openModal2" title="Cupom 10OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal3" title="Cupom 15 OFF Páscoa"></a>
   <a href="#openModal5" title="Cupom Passarinho"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
   <a href="#openModal4" title="Cupom 20 OFF Páscoa"></a>
</div>