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.