Question

我没有jquery这个工作，但问题是工具提示出现在整个div而不仅仅是PNG。

鼠标悬停功能与jquery运行良好，所以我决定切换到那个，但我不知道如何在鼠标悬停功能运行时触发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>

Answer 2

添加和删除类时，请不要在类名前使用. ...因为它会添加名为.class的类而不是class。

你可以让你的代码更清洁，并使用ES6变量声明（作为奖励:)）。如果你的html标记就像你的例子（工具提示正好在图像之后），你可以使用css选择器并摆脱mouseover / mousein / mouseout方法。请参见下面的示例，当您将鼠标悬停在图像上时，工具提示会消失

＆＃13;

const cookie = $("#cookie"),
      tooltip = $('.cookieToolTip')


cookie.on("mousemove", function(e) {
  for (let i = tooltip.length; i--;) {
    tooltip[i].style.left = e.pageX + 'px';
    tooltip[i].style.top = e.pageY + 'px';
  }
})

＆＃13;

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

＆＃13;

<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://via.placeholder.com/350x150" />
  <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>
</div>

＆＃13;

Answer 3

当你添加一个类时，你不需要在类名之前使用点，因为它是一个声明，而不是一个选择器

struct S {
    int eq;
    int value;
    bool operator==(const S& other) const { return eq == other.eq; }
};

namespace std {
    template <> struct hash<S>
    {
        size_t operator()(const S &s) const
        {
            return hash<int>()(s.eq);
        }
    };
}

array<S, 6> as{ { {1,0},{2,0},{3,0},{ 1,1 },{ 2,1 },{ 3,1 } } };
unordered_set<S> us(as.cbegin(), as.cend());

然后，您需要在外出时删除该类，如果您不继续应用该类，则由另一部分选择要应用的适当项目（悬停/鼠标悬停...）条件（请参阅以下示例。）

Wrong: $('#cookie').addClass('.cookieToolTipHovered');
Correct: $('#cookie').addClass('cookieToolTipHovered');

$('.zoomin').mouseover(function() {
  $('#cookie').addClass('cookieToolTipHovered');
});
$('#cookie').mouseout(function() {
  $('#cookie').removeClass('cookieToolTipHovered');
});

.cookieToolTipHovered {
  opacity: 0.35;
  transition: 1s;
}

.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;
}

Answer 4

您不需要mouseover事件处理程序。

相反，您可以使用:hover和+组合的纯CSS来处理opacity切换：

#cookie:hover+.cookieToolTip{ //This will change the opacity 
                              //of the tooltip when the image is hovered
  opacity: 1;
}

编辑：我添加了

.cookieToolTip:hover{
  opacity: 1;
}

修复在您悬停工具提示时将不透明度切换回来的错误。

<强>演示：

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

.cookieToolTip {
  display: block;
  position: absolute;
  background: #C8C8C8;
  padding: 10px;
  width: 200px;
  height: 50px;
  border: 1px solid black;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1000;
}

#cookie:hover+.cookieToolTip {
  opacity: 1;
}

.cookieToolTip:hover{
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cookie" src="http://img-3.journaldesfemmes.fr/4xufH0KP5SzV0aG1R7hg1zO_djQ=/750x/smart/b43857c04c9147e98997f9959bdd8f38/recipe-jdf/10027543.jpg" />
<span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>

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

4 个答案: