jQuery hover - div with dynamic id - mouseover works, mouseout doesn't -

i have page of thumbnails - when hover on each one, box of text displayed. when mouseout box should disappear. when hardcode works well. when try , use dynamic variables shows not hide text box

here code

$(function() {  $('[id^=trigger]').hover(function () { var roll =  this.id.replace(/trigger/, 'roll');       $('#' + roll).show();       }, function() {        $('#' + roll).hide();  });  

});

and here html

<div id='trigger".$id."' style='width:300px;height:200px;'><img src='http://www.example.com/uploads/".$id."/0.jpg'></div><div id='roll".$id."' style='background-color:#ffffff;display:none;width:284px;position:absolute;top 300px;padding:8px;'><h1 class='h1box'>$title</h1><p class='pbox'$text</p></div> 

so id each image trigger1, trigger 2 etc , text box roll1, roll2 etc

where going wrong? in advance

it doesn't work because roll in mouseleave undefined. because setting in mouseenter. have define same variable in mouseleave function:

$(function() {    $('[id^=trigger]').hover(function() {      var roll = this.id.replace(/trigger/, 'roll');      $('#' + roll).show();    }, function() {      var roll = this.id.replace(/trigger/, 'roll');      $('#' + roll).hide();    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id='trigger1' style='width:300px;height:200px;'>    <img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97150&w=300&h=200'>  </div>  <div id='roll1' style='background-color:#ffffff;display:none;width:284px;position:absolute;top 300px;padding:8px;'>    <h1 class='h1box'>title</h1>    <p class='pbox'>      test    </p>  </div>