javascript - 如何使用 Jquery 触发此 CSS 动画？

Question

我在没有 jquery 的情况下完成了这个工作，但问题是工具提示出现在整个 div 上，而不仅仅是 PNG 上。

mouseover 函数在 jquery 中工作得很好，所以我决定切换到它，但是我不知道如何在 mouseover 函数运行时触发 CSS 动画。

$('#cookie').mouseover(function() {
  //$('#tooltip').removeClass('.cookieToolTip');
  $('#tooltip').addClass('.cookieToolTipHovered');
});

// I also have some code to move the tooltip wherever the cursor is:

var tooltip = document.querySelectorAll('.cookieToolTip');

document.addEventListener('mousemove', fn, false);

function fn(e) {

  for (var i = tooltip.length; i--;) {
    tooltip[i].style.left = e.pageX + 'px';
    tooltip[i].style.top = e.pageY + 'px';
  }
}

.cookieToolTipHovered {
  visibility: visible;
  opacity: 1;
}

.cookieToolTip {
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  border: 1px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zoomin">
  <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" />
  <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>
</div>

Answer 1

您可以更改 CSS - 您可能想要隐藏(显示:无)而不是使用可见性，因为将鼠标移动到屏幕边缘现在会添加滚动条

$('#cookie').mouseover(function() {
  $('#tooltip').css({"opacity":1, "visibility": "visible"})
});
$('#cookie').mouseout(function() {
  $('#tooltip').css({ opacity: 0, visibility: "hidden"})
});

// I also have some code to move the tooltip wherever the cursor is:

var $tooltip = $('#tooltip');

$(document).on("mousemove",function(e) { 
  $tooltip.css({"left": e.pageX + 'px', "top" : e.pageY + 'px'});
})

.cookieToolTip {
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  border: 1px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zoomin">
  <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" />
  <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>
</div>