有没有一种快速简便的方法在jQuery中做到这一点,我错过了?
我不想使用鼠标悬停事件,因为我已经将它用于其他事情.我只需要知道鼠标是否在给定时刻超过元素.
如果只有"IsMouseOver"功能,我想做这样的事情:
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
Run Code Online (Sandbox Code Playgroud) 我创建了一个带有前一个和下一个按钮的旋转木马,它们始终可见.这些按钮具有悬停状态,它们变为蓝色.在触控设备(如iPad)上,悬停状态是粘性的,因此按下按钮后按钮会保持蓝色.我不希望这样.
我可以为每个按钮添加一个no-hover类ontouchend,并使我的CSS像这样:button:not(.no-hover):hover { background-color:
blue; }但这可能对性能非常不利,并且不能正确处理Chromebook Pixel(同时具有触摸屏和鼠标)等设备.
我可以添加一个touch类documentElement,并使我的CSS像这样:html:not(.touch) button:hover { background-color: blue;
}但这也不适用于同时具有触摸和鼠标的设备.
我更喜欢的是删除悬停状态ontouchend.但这似乎不太可能.聚焦另一个元素不会消除悬停状态.手动点击另一个元素,但我似乎无法在JavaScript中触发它.
我发现的所有解决方案似乎都不完美.有完美的解决方案吗?
如何检测两个<div>元素是否发生碰撞?
两个div是相互垂直的简单彩色盒子,因此没有复杂的形状或角度.
当我在悬停时,我正在元素中间显示一个jQuery UI工具提示.但是当悬停在工具提示上时,工具提示本身就会消失.(propagation问题)
元件:

使用工具提示:

因此,当我将工具提示本身悬停时,由于传播问题,它会消失,我想.
HTML:
<div class="bar-wrapper">
<label class="bar-lbl active one" title="2013"><span>2013</span></label>
<div class="bar" data-percent="90"></div>
<div class="bar-rest-overlay" data-percent="10"></div>
</div>
<div class="bar-wrapper">
<label class="bar-lbl active one" title="2014"><span>2014</span></label>
<div class="bar" data-percent="80"></div>
<div class="bar-rest-overlay" data-percent="20"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
当前代码:
$('.bar-lbl').tooltip(
{
tooltipClass: 'bar-tooltip',
position:
{
my: 'center',
at: 'center'
}
});
Run Code Online (Sandbox Code Playgroud)
部分修复(但工具提示永久可见):
$('.bar-lbl').on('mouseleave',
function(e)
{
e.stopImmediatePropagation();
}).tooltip(
{
tooltipClass: 'bar-tooltip',
position:
{
my: 'center',
at: 'center'
}
});
Run Code Online (Sandbox Code Playgroud)
不工作:
$('body').on('hover', '.ui-tooltip',
function(e)
{
e.stopImmediatePropagation();
});
Run Code Online (Sandbox Code Playgroud)
更新:感谢Trevor,我找到了一个紧密的解决方案.(当悬停时,它仍然可以看到最后一个悬停的工具提示):
似乎,当徘徊在工具提示本身时,它隐藏起来.但是 …
每个人都在推动功能检测很长一段时间.我想检测访问者的浏览器是否支持:hover伪类.我的理解是,有足够的(如果不是大多数)移动设备不支持悬停,所以我想相应地设置我的事件监听器.但是如果没有移动侦测,我不确定如何实现这一点,到目前为止我还没有通过Google或SO找到任何东西.
也许类似于问题#8981463
$(function() {
var canHover = $(document).is(":hover");
});
Run Code Online (Sandbox Code Playgroud)
直到下周我才能在移动设备上测试这个.
思考?
我的问题非常类似于Reduce multiple if语句
我有多个if else语句,我想使用jquery每个函数来使代码更有效,但我无法弄清楚如何做到这一点.
我在wordpress中运行jQuery,我相信在noconflict模式下运行,所以我不能得到更多(我考虑的)高级主题,这些主题为我提供了示例,因为我无法理解正确的功能要使用的语法.
如果有人可以帮助并解释如何为我做这将是惊人的.这是我的代码:
var $h6p = $("h6 + p");
var $h5p = $("h5 + p");
var $h4p = $("h4 + p");
var $h3p = $("h3 + p");
var $h2p = $("h2 + p");
var $h1p = $("h1 + p");
var $fullercolor_bg = "rgba(240,234,222,0.9)";
if($h1p.mouseIsOver()) {
$h1p.prev().css("background-color", $fullercolor_bg);
} else {
$h1p.prev().css("background-color", "");
}
if($h2p.mouseIsOver()) {
$h2p.prev().css("background-color", $fullercolor_bg);
} else {
$h2p.prev().css("background-color", "");
}
if($h3p.mouseIsOver()) {
$h3p.prev().css("background-color", $fullercolor_bg);
} else {
$h3p.prev().css("background-color", "");
}
if($h4p.mouseIsOver()) { …Run Code Online (Sandbox Code Playgroud)