html - JQuery Onmouseover selection attribute

Question

I have been playing a bit with jQuery's onmouseover function. The code bellow does the following: when the user hovers the links, it triggers the titles(text) with a css(text+background) position on background image. But there is a visibility problem when that happens. In order for the user to see the onmouseover spam titles, the user has to go all over the image until it finds the onmouseover trigger to see the title(text).

What I want to achieve is: when the user hovers on any part of the background image it will trigger all onmouseover events inside the same div.Unfortunately I am struggling in find a solution for it.

Jquery:

var $j = jQuery.noConflict();

$j(document).ready(function(){

$j( 'a' ).mouseout(function(){
  var book_id=$j(this).parent().attr('id');
$j('#'+book_id).children('.info_span1').hide();
$j('#'+book_id).children('.info_span2').hide();
});

$j('a').mouseenter(function(){
    var book_id=$j(this).parent().attr('id');
    var position = $j(this).position();
$j('#'+book_id).children('.info_span1').show();$j('#'+book_id).children('.info_sp
an2').show();


       $j('#'+book_id).children('.info_span1').text($j(this).data("title1"));
       $j('#'+book_id).children('.info_span2').text($j(this).data("title2"));
       $j('#'+book_id).children('.info_span1').css({top: $j(this).height()-6, 
     left:position.left, position:'absolute'});
       $j('#'+book_id).children('.info_span2').css({top: $j(this).height()-6, 
       left:position.left+$j(this).width(), position:'absolute'});

  });
 });

The html, jquery and css here:

jsfiddle

HERE IS THE SOLUTION : JSFIDLE

Answer 1

to trigger mouseover event in all elements inside a div you use sth like this :

$("selector").mouseover(function(){
    $(this).find("*").each(function(){
         $(this).trigger("mouseover");
    });
});