0

HTML:

        <div class="row">
            <div class="col-md-4">
                    <a href="#" class="qualificationbox">
                        <h2 class="title">Junior</h2>
                        <img src="images\getquote\junior.png" >
                        <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                    </a>
            </div>

            <div class="col-md-4">
                <a href="#" class="qualificationbox">
                    <h2 class="title">Medium</h2>
                    <img src="images\getquote\medium.png" >
                    <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                </a>
            </div>

            <div class="col-md-4">
                <a href="#" class="qualificationbox">
                    <h2 class="title">Senior</h2>
                    <img src="images\getquote\senior.png" >
                    <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                </a>
            </div>
        </div>

css:

Tenho estas classes que definem os valores que vao ter inicialmente:

.qualificationbox {
position: relative;
display: block;
padding: 1.5em .5em;
margin-bottom: 1.5em;
border-radius: .5em;
background: #fafbfc;
text-align: center;
height: 100%;
color: #ff0000;}

.qualificationbox .info {
color: inherit;}

.qualificationbox .title {
text-transform: uppercase;
margin: 0;
color: inherit;}

ao clickar, ou ao passar o rato por cima, queria substituir a qualificationbox pela qualificationboxselect:

.qualificationboxselect {
position: relative;
display: block;
padding: 1.5em .5em;
margin-bottom: 1.5em;
border-radius: .5em;
background: #ff0000;
text-align: center;
height: 100%;
color: #fff;}

.qualificationboxselect .title {
text-transform: uppercase;
margin: 0;
color: inherit;}

.qualificationboxselect .info {
color: inherit;}

Mas apenas podera haver uma selecionada(qualificationboxselect), ou seja se eu tiver a "junior" selecionada e selecionar a "medium", pretendia remover a "junior". Será que é possivel alguem me ajudar,nao estou mesmo a conseguir Obrigado.

1 Resposta 1

2

Para o caso de quando o rato estiver sobre o elemento, basta usar a pseudoclass hover, que irá alterar temporariamente o estilo enquanto estiver sobre o elemento. Leia mais aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/:hover

Para o caso do click, basta trocar as classes usando classList.toggle que irá alterar a classe. Leia mais aqui: https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList

OBS.: como não mencionou na pergunta, fiz o exemplo usando Javascript puro, mas deves ter o jQuery uma vez que está usando Bootstrap

function selecionar(elemento) {
   var temClasse = elemento.classList.contains('qualificationboxselect');
   var selecionados = document.querySelectorAll('.qualificationboxselect');

   for (var i = 0; i < selecionados.length; i++) {
       selecionados[i].classList.remove('qualificationboxselect');
   }

   if (!temClasse) {
       elemento.classList.toggle('qualificationboxselect');
   }
   return false;
}
/* qualificationbox */
.qualificationbox {
position: relative;
display: block;
padding: 1.5em .5em;
margin-bottom: 1.5em;
border-radius: .5em;
background: #fafbfc;
text-align: center;
height: 100%;
color: #ff0000;}

.qualificationbox .info {
color: inherit;}

.qualificationbox .title {
text-transform: uppercase;
margin: 0;
color: inherit;}

/* qualificationbox:hover */
.qualificationbox:hover {
position: relative;
display: block;
padding: 1.5em .5em;
margin-bottom: 1.5em;
border-radius: .5em;
background: #ff0000;
text-align: center;
height: 100%;
color: #fff;}

.qualificationbox:hover .title {
text-transform: uppercase;
margin: 0;
color: inherit;}

.qualificationbox:hover .info {
color: inherit;}

/* qualificationboxselect   */
.qualificationboxselect {
position: relative;
display: block;
padding: 1.5em .5em;
margin-bottom: 1.5em;
border-radius: .5em;
background: #ff0000;
text-align: center;
height: 100%;
color: #fff;}

.qualificationboxselect .title {
text-transform: uppercase;
margin: 0;
color: inherit;}

.qualificationboxselect .info {
color: inherit;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
            <div class="col-md-4">
                    <a href="#" class="qualificationbox" onclick='selecionar(this)'>
                        <h2 class="title">Junior</h2>
                        <img src="images\getquote\junior.png" >
                        <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                    </a>
            </div>

            <div class="col-md-4">
                <a href="#" class="qualificationbox" onclick='selecionar(this)'>
                    <h2 class="title">Medium</h2>
                    <img src="images\getquote\medium.png" >
                    <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                </a>
            </div>

            <div class="col-md-4">
                <a href="#" class="qualificationbox" onclick='selecionar(this)'>
                    <h2 class="title">Senior</h2>
                    <img src="images\getquote\senior.png" >
                    <p class="info">dsadasdsff fsd fsd fds fds f sef sdf s </p>
                </a>
            </div>
        </div>

4
  • obrigado pela ajuda, tenho apenas uma questao, ao ter por exemplo a 1ª selecionada, e ao selecionar a 2ª, pretendia que a 1ª fosse desselecionada, e a 2ª ser selecionada, nao sei se fui muito explicito, obrigado. 21/05/2018 às 12:00
  • entendi @JoséVitório. Nesse caso basta remover a classe qualificationboxselect de todos os elementos primeiro. Fiz isso no código, veja o exemplo. Acrescentei também uma validação para saber se elemento clicado já tinha a classe, para poder aplicar no final (fazer o toggle) 21/05/2018 às 12:24
  • muito obrigado @Ricardo Pontual 21/05/2018 às 13:28
  • @JoséVitório, se a resposta resolveu sua dúvida, não esqueça de aceitar a resposta como correcta 22/05/2018 às 11:04

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 .