jquery - mouseleave div，将背景颜色更改为灰色， mouseleave 触发 div 内的 Qtip，将背景颜色更改为粉红色

Question

标题是不言自明的，这是我到目前为止所拥有的，但是在鼠标悬停时背景颜色总是保持灰色，而不是在 qtip 悬停时保持粉红色：

$().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/完成设置。这真让我抓狂！
任何解决此问题的答案都将被标记为答案。

Answer 1

我看到的是当鼠标离开时事件触发 '#openDiv' ，然后 e.relatedTarget 将是你离开时输入的任何内容，这没什么。如果您希望主 div 在悬停在 qtip 上时变为粉红色，您应该在 qtip 上使用 .hover （或 .mouseenter 将其设置为粉红色），就像简单...

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

我看到 qtip 的东西似乎是在 DOM 准备好之后创建的，所以你可能想改用 .live ......

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