Change div by clicking / when hovering over with jquery

Question

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:

I have these classes that define the values I will have initially:

.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;}

by clicking, or by hovering over, I wanted to replace the qualificationbox with the 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;}

But there can only be one selected (qualificationboxselect), ie if I have the "junior" selected and select the "medium", I intended to remove the "junior". Is it possible for someone to help me, Thank you.

Answer 1

In case when the mouse is over the widget, just use the pseudoclass hover, which will temporarily change the style while you are over the element. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:Hover

For the click case, just change the classes using classList.toggle that will change the class. Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

OBS.: as not mentioned in the question, I made the example using Javascript pure, but you must have the jQuery once you are using 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>