Tenho o seguinte codigo, onde os links estão escondidos com opacity: 0
e com hover ele passa a ter opacity: 1
;
Porém preciso que o SetInterval
, mostre aleatoriamente eles. Até por que no mobile não funciona o hover
. Não tenho muito conhecimento em Java, alguém sabe o por que de não estar funcionando meu código?
<script>
setInterval(function(){
var arr = jQeury('.scenario a+a+a+a:hover');
arr[9].show().delay(500).hide();
}, 3000);
</script>
.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;
}
.scenario a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
background-size: contain;
background-repeat: no-repeat;
}
.scenario a+a {
border-radius: 50%;
transform: rotate(-12deg);
opacity: 1;
-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;
}
.scenario a+a:hover {
opacity: 2;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
/* 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;
}
.scenario a+a+a+a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_cortado.png);
}
.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;
}
.scenario a+a+a+a+a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/ovo_lisas.png);
}
.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;
}
.scenario a+a+a+a+a+a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
}
.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;
}
.scenario a+a+a+a+a+a+a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_verde.png);
}
.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;
}
.scenario a+a+a+a+a+a+a+a:hover {
opacity: 1;
background-image: url(https://cdn.boutiqueinfantil.com.br/media/wysiwyg/Paginas/pascoa/Ovo_rosa.png);
}
<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>
jQeury
está digitado errado. SeriajQuery
. Não sei se é esse o problema, mas é um erro de digitação visível.