如何使用 jquery 进行 if not 条件测试？

发布于 2024-12-03 10:23:00 字数 334 浏览 1 评论 0原文

当鼠标进入图像时，我有一个标签出现在图像上。当我想用鼠标继续链接时，链接逻辑上会消失，因为我使用 .mouseleave() 函数在鼠标离开图像时隐藏链接。

我想对 .mouseleave() 进行条件测试，如下所示：

if(!$("#linkId").mouseenter()){
//...
}

我尝试使用 .not().mouseenter() 而不是 ! 不但是

它不起作用..当我输入链接时，它会保留并且永远不会离开...

谢谢

山姆

原文

I have a tag that appears on an image when the mouse enters the image. When I want to go on the link with the mouse the link logically disappears because i used .mouseleave() function to hide the link when the mouse leaves the image.

I thought to do a conditional test for the .mouseleave() as follow:

if(!$("#linkId").mouseenter()){
//...
}

I tried with .not().mousenter() instead of ! not

But it does not work.. When I enter on the link, it stays and it it never leaves...

Thank you

Sam

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞美少年 2024-12-10 10:23:00

将链接和图像放入容器中，并将事件处理程序分配给容器。您可以使用 CSS 定位链接。

由于链接和图像是父级的子级，因此当您将鼠标悬停在链接上时，不会触发 mouseleave 事件。

示例：

HTML:

<div id="parent">
    <div id="image"></div> <!-- the div is just an example -->
    <a id="link" href="#">Some link</a>
</div>

CSS:

#parent {
    position: relative;
}

/* used div for demo only */
#image {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#link {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript:

$('#parent').hover(function() {
    $('#link').toggle();
});

DEMO

$("#linkId ").mouseenter() 没有做你认为它做的事情。它不会测试鼠标是否位于链接上方，而是在链接上生成一个 mouseenter 事件。

Put both, the link and the image in a container and assign the event handler to the container instead. You can position the link with CSS.

As the link and the image are children of the parent, the mouseleave event is not triggered when you hover over the link.

Example:

HTML:

<div id="parent">
    <div id="image"></div> <!-- the div is just an example -->
    <a id="link" href="#">Some link</a>
</div>

CSS:

#parent {
    position: relative;
}

/* used div for demo only */
#image {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

#link {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript:

$('#parent').hover(function() {
    $('#link').toggle();
});

DEMO

$("#linkId").mouseenter() is not doing what you think it does. It does not test whether the mouse is over the link or not, it generates a mouseenter event on the link.

回复收藏 0 原文

七禾 2024-12-10 10:23:00

使用 hover()，并将其绑定到链接和图像，或者将图像包含在链接元素中。

<img src="example.gif" alt="" id="showme" style="display:none" />
<a href="#" id="hoverme">Hover me</a>

<script type="text/javascript">
    $('#hoverme,#showme').hover(function(){
        $('#showme').toggle();
    });
</script>

Use hover(), and either bind it to both the link and the image, or have the image within the link element.

i.e.

<img src="example.gif" alt="" id="showme" style="display:none" />
<a href="#" id="hoverme">Hover me</a>

<script type="text/javascript">
    $('#hoverme,#showme').hover(function(){
        $('#showme').toggle();
    });
</script>

回复收藏 0 原文

~没有更多了~