Question

我需要使用href而不是click事件，所以我可以在下面的语句中使用hover。

我想要做的是能够像使用click事件一样使用href，所以我可以通过href附加一个函数，因此我可以使用在css上完成的悬停效果。

它是一个删除按钮，所以它是一个灰色的x，如果你悬停变红，如果你按下按钮，那么它将删除该行。

感谢。

$(document).ready(function(){
  $(".btnDeleteOther").live("click", function(){
  $(this).closest('tr').not(':only-child').remove();
});

任何想法？

感谢。

Answer 1

在某些浏览器中：如果您没有href来获取onclick和悬停功能，则悬停不起作用

<a href="#" onclick="action(); return false;">Delete X</a>

onclick上的return false会阻止浏览器执行默认操作，而href =“＃”表示即使这样做也只是指向此页面的链接。

根据其他答案，您可以使用CSS hover伪类来设置元素的样式

a.delete{
    ...
}

a.delete:hover{
    ...
    color:red;
}

对于href =“＃”我会把它放在你提交的html中，如果没有你可以使用以下jquery来添加属性

$(".btnDeleteOther").attr('href','#');

至于从click事件返回false，它确认至少当你只有一个click事件被定义时，jQuery将返回你的click函数返回的内容，所以

$(".btnDeleteOther").click(function(){doStuff(); return false;});

或者在事件

上使用preventDefault方法

$(".btnDeleteOther").click(function(event){doStuff(); event.preventDefault();});

请参阅http://api.jquery.com/click/

Answer 2

即使在这种情况下，您也可以使用CSS进行悬停。

如果.btnDeleteOther是一个锚点，你可以使用这个CSS属性：

a.btnDeleteOther
{
//normal style
}

a:hover.btnDeleteOther
{
//hover style
}

Answer 3

a:hover.btnDeleteOther
{
  cursor: pointer;
}

我使用它来模仿href的外观，同时仍然使用onclick事件。

Answer 4

您可以将href设置为“＃”，例如<a href="#">The link text</a>。这告诉浏览器不要导航到另一个页面，而是跳转到当前页面上不存在的锚点，实质上是使链接不执行任何操作。您可以更进一步，从click事件处理程序返回false，告诉浏览器在单击时不遵循链接。

另一种方法是处理jQuery悬停事件并更改悬停在其上的元素的css类，例如：

$(document).ready(function(){
    $(".btnDeleteOther").hover(
        function(){ $(this).addClass('deleteButtonHovered'); },
        function(){ $(this).removeClass('deleteButtonHovered'); }
    );
});

Jquery添加href而不是click事件

4 个答案: