Link to [fiddle](https://jsfiddle.net/krish7878/xpvt214o/460806/) 

I am trying to use $(this) keyword & jquery's hover() function. 

There are 3 divs with class 'item', each div contains two child divs, 'trigger' & 'trigger-box', what I am trying to achieve is when user hovers on each 'trigger' div, 'visible' class needs to be added to it's respective 'trigger-box'. 

HTML Code:

```
<div class="container">
  <div class="item">
    <div class="tirgger">
      <h5>Trigger 1</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 1</h3>
    </div>
  </div>
   <div class="item">
    <div class="tirgger">
      <h5>Trigger 2</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 2</h3>
    </div>
  </div>
   <div class="item">
    <div class="tirgger">
      <h5>Trigger 3</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 3</h3>
    </div>
  </div>

```

JavaScript Code: 

```
$('.item').hover(function() {

    console.log("hover in");
    $('.item .trigger-box', this).addClass('visible');

  }, function() {

    console.log("hover out");
    $('.item .trigger-box', this).removeClass('visible');;
});

```

I've tried with multiple combinations '$(this)' keyword but couldn't get it to work, any help would be appreciated.