JrProgrammeur JrProgrammeur - 1 month ago 5
Javascript Question

How can i make hover clickable?

I have here an

click
( click on details (link)) that
shows
the data.
What I want is that the
hover
does the same thing as the
click
.

So if i click on the hover it must
show
the
list
of
clicked
hover
.

Working fiddle

EDIT:

HTML:

<div class="kop">
<div class="nr"></div>
<div class="naam">kees</div>
<div></div>
<div class="details"><a>(details)</a> </div>
</div>
<div class="listt">
<ol>
<li>HOW</li>
<li>Can</li>
<li>I</li>
</ol>
</div>

<div class="kop">
<div class="nr"></div>
<div class="naam">Steve</div>
<div></div>
<div class="details"><a>(details)</a> </div>
</div>
<div class="listt">
<ol>
<li>Help</li>
<li>You</li>
<li>?</li>
</ol>
</div>


JS:

$('.listt').hide();

$(document).on('click','.details a',function(){
$(this).closest('.kop').next('.listt').toggle();
});


CSS:

.kop
{
display: block;
width: 100%;
padding: 5px 0;
}
.kop div
{
display: inline-block;
}

.kop:hover
{
background-color:#CCCCCC;
}


EDIT:

Look at this

Answer

You just have to update your selector to .kop and inside function, dont lookup for closest(',kop'). Just do .next...

$('.listt').hide();

var showSection = function() {
  $(this).next('.listt').toggle();
}
$(document).on('click', '.kop', showSection);
.kop {
  display: block;
  width: 100%;
  padding: 5px 0;
}
.kop div {
  display: inline-block;
}
.kop:hover {
  background-color: #CCCCCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="kop">
  <div class="nr"></div>
  <div class="naam">kees</div>
  <div></div>
  <div class="details"><a>(details)</a> 
  </div>
</div>
<div class="listt">
  <ol>
    <li>HOW</li>
    <li>Can</li>
    <li>I</li>
  </ol>
</div>

<div class="kop">
  <div class="nr"></div>
  <div class="naam">Steve</div>
  <div></div>
  <div class="details"><a>(details)</a> 
  </div>
</div>
<div class="listt">
  <ol>
    <li>Help</li>
    <li>You</li>
    <li>?</li>
  </ol>
</div>