Mouseleave div, change background color to grey, mouseleave to triggered Qtip within div, change background color to pink

The title is self explanatory, here is what I have so far, but the background color always stays grey on mouseout, instead of pink on qtip hover:

$().ready(function() {
$("#openDiv").mouseleave(function (e) {
var used_classes = ['qtip'];
var $c = $(e.relatedTarget).attr('class');

if ($c=='qtip')
  {
   $("#openDiv").css('background-color', 'pink');
  } else{
   $("#openDiv").css('background-color', 'grey');
  }
 });
 });

http://jsfiddle.net/bUzPG/21/ with complete setup. This is driving me crazy!
Any answer 开发者_JS百科that solves this issue will be marked as the answer.

---

what I see is that the event fires when the mouse leaves '#openDiv' , and then e.relatedTarget would be whatever you're entering when you leave, which is nothing. If what you want is for the main div to go pink when hovering over qtip, you should be using .hover (or .mouseenter to set it pink) on the qtip, like simply...

$(".qtip").hover(
  function() {
    $("#openDiv").css('background-color', 'pink')
  },
  function() {
    $("#openDiv").css('background-color', 'white')
  }
)

I see that the qtip thing seems to be created after the DOM ready, so you might want to use .live instead...

$(".qtip").live('mouseenter', function() {
    $("#openDiv").css('background-color', 'pink')
  })
  .live('mouseleave', function() {
      $("#openDiv").css('background-color', 'white')
    }
)