1

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.

2
  • Você está utilizando modo do compatibilidade de navegador no seu css -webkit- e -moz-?
    – WMomesso
    Commented 30/09/2017 às 13:44
  • como assim? Dá uma explicação fazendo favor? Commented 30/09/2017 às 13:52

1 Resposta 1

1

inserir a descrição da imagem aqui No print acima, quando passo o ponteiro de selecionar elementos sobre o menu, ele seleciona o body (em azul) em vez de selecionar o menu.

Seu problema está no z-index negativo abaixo, que está jogando a <ul> pra trás do body:

.selectOptions ul {
    overflow: hidden;
    list-style: none;
    z-index: -1;
}

Apague a linha z-index: -1; que irá funcionar no Chrome também.

18
  • não consegui enxergar que o menu está por traz. Você consegue me passar uma print dessa tela fazendo favor? Commented 30/09/2017 às 22:11
  • @CarlosRocha Botei um print na resposta.
    – Sam
    Commented 30/09/2017 às 22:17
  • Entendi, note que você está passando o mouse sobre a ul aberta e da segunda opção em diante. Nesse caso, você está em cima de um pseudo elemento afer que ainda não está no dom. Por isso o inspector marca o body. Acho que é isso. Mas eu gostaria que você me enviasse é daquele detalhe do inicio do post onde você diz que a div está por cima do menu Commented 30/09/2017 às 22:32
  • @CarlosRocha Pois é. No Chrome o menu está por baixo, por isso que ele não funciona. Com z-index eu consegui trazer ele pra cima e funcionou. No Firefox funcionou sem o z-index. Isso significa que seu código não está muito bom. É muito difícil acontecer incompatibilidades entre navegadores para coisas simples assim. Quando isso ocorre, é sinal de que o código não está legal.
    – Sam
    Commented 30/09/2017 às 22:37
  • @CarlosRocha Seu problema está no CSS .selectOptions ul com z-index: -1;... Tira isso que irá funcionar.
    – Sam
    Commented 30/09/2017 às 22:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .