2

Boa tarde, Eu estou desenvolvendo 1 jogo em Meteor, e por exemplo quando clico para escolher a personagem queria que o fundo fica-se verde, e caso escolhe-se outra personagem o fundo voltaria ao normal e a nova personagem selecionada ficaria a verde. inserir a descrição da imagem aqui

  .archer{
        background: transparent;
        background-image: url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

    .warrior{
        background: transparent;
        background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

    .mage{
        background: transparent;
        background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

.archer:active{
    background-color: #3e8e41;
}

.warrior:active{
    background-color: #3e8e41;
}

.mage:active{
    background-color: #3e8e41;
}
4
  • É bom postar o código porque isso pode ser feito de muitas maneiras, tanto com JS quanto com apenas CSS.
    – Sam
    Commented 16/05/2018 às 16:23
  • da para fazer so com css?
    – Ricardo
    Commented 16/05/2018 às 16:24
  • Dá sim. Posta o código do botão.
    – Sam
    Commented 16/05/2018 às 16:25
  • Já postei o codigo que tenho para os butoes
    – Ricardo
    Commented 16/05/2018 às 16:28

3 Respostas 3

3

Pode usar o atributo tabindex nas divs e no CSS usar a pseudo-classe :focus:

.archer{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.warrior{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.mage{
    background: transparent;
    background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.archer:focus,
.warrior:focus,
.mage:focus{
    background-color: #3e8e41;
}
<div tabindex="1" class="archer">
</div>
<div tabindex="2" class="warrior">
</div>
<div tabindex="3" class="mage">
</div>

1
  • é uma boa solução mas nao dava para o que eu pretendia, obrigado
    – Ricardo
    Commented 17/05/2018 às 8:52
1

Vê se fica alguma dúvida

var verde1 = document.getElementById("selecao-1");
var verde2 = document.getElementById("selecao-2");
var verde3 = document.getElementById("selecao-3");

verde1.addEventListener("click", function(event) {
verde1.style.backgroundColor  = 'green';
  verde2.style.backgroundColor  = 'transparent';
  verde3.style.backgroundColor  = 'transparent';
})


verde2.addEventListener("click", function(event) {
 verde1.style.backgroundColor  = 'transparent';
  verde2.style.backgroundColor  = 'green';
  verde3.style.backgroundColor  = 'transparent';
})

verde3.addEventListener("click", function(event) {
 verde1.style.backgroundColor  = 'transparent';
  verde2.style.backgroundColor  = 'transparent';
  verde3.style.backgroundColor  = 'green';
})
.hide{
display:hide;
}

#selecao-1{
  
  width:100px;
  height:100px;
  border:1px solid #000000;
}
#selecao-2{

  width:100px;
  height:100px;
  border:1px solid #000000;
}
#selecao-3{

  width:100px;
  height:100px;
  border:1px solid #000000;
}
<div id="selecao-1" class=''></div>
<div id="selecao-2" ></div>
<div id="selecao-3" ></div>

2
  • ajudou bastante, obrigado
    – Ricardo
    Commented 17/05/2018 às 8:52
  • @Roberto Fico contente em ajudar! Qualquer dúvida me avise Commented 18/05/2018 às 13:37
0

Você pode criar uma classe .ativo com o fundo verde e adicionar ao elemento clicado, usando um eventListener para cada um.

Adicione uma classe comum .personagem para cada div:

<div class="personagem archer">
</div>
<div class="personagem warrior">
</div>
<div class="personagem mage">
</div>

E o CSS:

.personagem.ativo{
    background-color: #3e8e41;
}

E o script que fará a aplicação do fundo verde adicionando a classe .ativo:

var persons = document.querySelectorAll(".personagem");
var person;
for(var x=0; x<persons.length; x++){
   persons[x].addEventListener("click", function(){
      this.classList.add("ativo");
      if(person && person != this) person.classList.remove("ativo");
      person = this;
   });
}

Veja funcionando:

var persons = document.querySelectorAll(".personagem");
var person;
for(var x=0; x<persons.length; x++){
   persons[x].addEventListener("click", function(){
      this.classList.add("ativo");
      if(person && person != this) person.classList.remove("ativo");
      person = this;
   });
}
.archer{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.warrior{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.mage{
    background: transparent;
    background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.personagem.ativo{
    background-color: #3e8e41;
}
<div class="personagem archer">
</div>
<div class="personagem warrior">
</div>
<div class="personagem mage">
</div>

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 .