Bom, tenho na seguinte página
http://www.hotplateprensas.com.br/estilos/aa2.php
O script funcional
Já quando eu migro para o final da pagina:
http://www.hotplateprensas.com.br/estilos/index.php
Então ocorrem os seguintes erros:
1 ) Não consigo mais clicar nas li's
2 ) Já não aparece o efeito de pointer (mãozinha) ao passar o mouse sobre as li's
Já tentei de tudo mas não estou conseguindo.
E ainda tem outra coisa:
http://www.hotplateprensas.com.br/estilos/aa2.php
Não funciona no chrome
, só no firefox
Eis aqui o código do aa2.php
<script type="text/javascript" src="_js/jquery.js"></script>
CSS
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
margin: 0 auto;
width: 800px;
}
.selectOptions select {
display: none;
}
.selectOptions .selectOption:after {
position: absolute;
content: "";
display: block;
top: 1px;
right: 1px;
width: 33px;
height: 33px;
background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaBaixo:after {
background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaCima:after {
background-image: url(_imgs/setaCima.jpg);
}
.selectOptions .selectOption, ul {
position: relative;
width: 200px;
height: 35px;
background-color: rgba(0,0,0,0.2);
}
.selectOptions ul {
overflow: hidden;
list-style: none;
z-index: -1;
}
.selectOptions ul li {
width: 100%;
height: 31px;
line-height: 31px;
cursor: pointer;
padding: 2px;
color: rgb(255,255,255);
background-color: rgb(240,240,240);
border-bottom: rgba(0,0,0,.1) 1px solid;
}
.selectOptions ul li:hover {
color: rgb(255,255,255);
background-color: rgba(0,0,0, .1);
}
.selectOptions ul li:hover + .selectOption:after {
color: rgba(0,0,0, .1);
background-color: rgb(255,255,255);
}
HTML
<div class="selectOptions">
<select name="select" required>
<option value="1">um</option>
<option value="2">dois</option>
<option value="3">Tres</option>
</select>
<div class="selectOption">
<ul>
</ul>
</div>
</div>
jQuery
$(document).ready(function(e) {
$(".selectOptions select").css("display", "none");
contador = 0;
$(".selectOptions .selectOption").click( function() {
if(contador % 2 == 0) {
$(".selectOptions ul").css("overflow", "visible") ;
$(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
} else {
$(".selectOptions ul").css("overflow", "hidden");
$(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
}
$('.selectOptions .selectOption ul li').click(function(){
alert();
$($(this).closest('ul')).prepend($(this));
$(".selectOptions select option").filter(function() {
return $(this).val() == $('.selectOptions .selectOption ul li').val();
}).prop("selected", true);
})
contador++;
});
$(".selectOptions select > option").each(function() {
$(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
});
});
Uma coisa que observei é que na index.php, quando chega aqui:
$('.selectOptions .selectOption ul li').click(function(){
alert();
Não entra na função, pode colocar uma alert na primeira linha que não alerta. Pode deixar só alert dentro da função que nada acontece.
Isso para ambos os navegadores, chrome e firefox.
No entanto, para o arquivo aa2.php, o erro só ocorre para o chrome.
Mas outra coisa que notei é que no css
, cursor:pointer não está funcionando para a página index.php nos 2 navegadores já na página aa2.php o cursor funciona.
-webkit-
e-moz-
?