javascript - Jquery Hover effect with clickable element inside the main clickable element -

i have div has clickable event.

<div id="economy" class="service-block" title="economy" data-price="79.09">   <h3>economy </h3>   <span class="service-price">r79.09</span>   <div class="selected-service"></div>   <div class="service-info" title="economy">?</div> </div> 

it has hover effect

$(function () {     $('.service-block').hover(      function () {         $(this).animate({             backgroundcolor: '#258dd4'         }, 250);         var tron = $(this).attr('id');         $('#' + tron + ' .service-info').show(50);         $('#' + tron + ' h3').css('color', '#303030');     },      function () {         $(this).animate({             backgroundcolor: 'rgba(37, 140, 212,0.2)',         }, 250);         var tron = $(this).attr('id');         $('.service-info').hide(50);         $('#' + tron + ' h3').css('color', '#fff');     }); }); 

the hover effect displays .service-info small "?" div block. want element have clickable event. when click on "?" div block acts on main div click event , "?" div block click event.

i have tried various options taking .service-info div outside of main div terrible ux. have tried hover() ,mouseenter(), mouseenter(), mouseout() not work well, not can put production.

any suggestions?

thanks.

maybe stoppropagation may help:

$(function() {      $('#foo').click(function(event) {          alert('red');     });      $('#foo > div').click(function(event) {          event.stoppropagation();          alert('blue');     });  }); 

http://jsfiddle.net/coma/zmahz/