Jquery добавить HREF вместо клика

Question

Мне нужно использовать href вместо события click, чтобы я мог использовать hover в следующем выражении.

То, что я пытаюсь сделать, - это использовать href, как если бы он был событием click, чтобы я мог прикрепить функцию через href, поэтому я мог бы использовать эффект hover, который уже сделан на css.

Это кнопка удаления, так что это будет серый x, и если вы наведите курсор мыши на красный цвет, а если вы нажмете кнопку, то он удалит строку.

Спасибо.

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

Есть идеи?

Спасибо.

Answer 1

В некоторых браузерах a: hover не работает, если у вас нет href, чтобы получить функцию onclick и hover, которую вы можете

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

возвращаемое ложное значение на клике предотвратит действие браузера по умолчанию, а href = "#" означает, что даже если это так, это всего лишь ссылка на эту страницу.

Согласно другим ответам, вы можете использовать псевдокласс CSS hover для стилизации элемента

a.delete{
    ...
}

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

Для href = "#" я бы добавил это в HTML, который вы отправили, если вы не можете использовать следующий jquery для добавления атрибута

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

Что касается возврата false из события click, то получается, что, по крайней мере, когда у вас определено только одно событие click, jQuery вернет то, что возвращает ваша функция click, так что

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

Или используйте метод warnDefault для события

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

см. http://api.jquery.com/click/

Answer 2

Вы можете использовать hover даже в этом сценарии, используя CSS.

Если .btnDeleteOther является якорем, вы можете использовать этот атрибут CSS:

a.btnDeleteOther
{
//normal style
}

a:hover.btnDeleteOther
{
//hover style
}

Answer 3

Вы можете установить href на "#", например, <a href="#">The link text</a>. Это говорит браузерам не переходить на другую страницу, а вместо этого переходить к несуществующей привязке на текущей странице, по сути, заставляя ссылку ничего не делать. Вы можете сделать еще один шаг, вернув false из обработчика события click, который говорит браузеру не переходить по ссылке при нажатии.

Альтернативой является обработка события наведения jQuery и изменение класса css для элемента, над которым наведен курсор, например ::1004*

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

Answer 4

a:hover.btnDeleteOther
{
  cursor: pointer;
}

Я использую это, чтобы имитировать внешний вид href, все еще используя событие onclick.