Change div when click / mouse over with jquery

Question

Change div when click / mouse over with jquery

Navigation

#1 by (2 votes)

1

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 that will initially have:

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

Clicking, or hovering over, wanted to replace the qualificationbox with 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), that is if I have the "junior" selected and select the "medium", I wanted to remove the "junior". Is it possible for someone to help me, I'm not really able to Thank you.

javascript html

asked by anonymous 21.05.2018 / 13:33

1 answer

How to select data from a column as a column in SQL? [closed] Call up a macro in different modules

score 2 · Answer 1

For the case of when the mouse is on the element, just use the pseudoclass hover , which will temporarily change the style while on the element. Read more here: link

For the click case, just change the classes using classList.toggle that will change the class. Read more here: link

OBS. : As you did not mention in the question, I made the example using Javascript pure, but you must have jQuery since 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><linkhref="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><divclass="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>