JavaScript 或 JQuery 使元素表现得像一个链接 - onmouseover 或 hover？

Question

好吧，这次我有一个相当棘手的问题：让 HTML 表格的 TR 行表现得像一个超链接。 :/ 不幸的是，我无法更改 HTML 的基本结构以使用 DIV（由于编码要求 - 说来话长）。

那么问题出在哪里？

基本上，我知道 onclick (JavaScript) 或 click (JQuery) 会将这些元素链接到我需要的页面，并且我已经实现了这些解决方案成功。但是，我希望它们在用户悬停时像超链接一样，以便用户看到（通过“手”或浏览器中的任何悬停图标）他正在查看一个链接，并且可以右键单击并在新窗口中打开。

我知道我可以分别对 JavaScript 和 JQuery 使用 onmouseover 和 hover 方法。问题是，我一点也不知道要在这些方法中添加什么代码才能使它们按我需要的方式工作，而且我在 Google 上的搜索到目前为止还没有结果。 ：/

到目前为止我的工作代码

使用 HTML 和 JavaScript

我的 HTML：

<tr class = "oneResultat" onclick="DoNav('annonce.php')">
    ...
</tr>

还有 JavaScript：

function DoNav(url)
{
    document.location.href = url;
}

使用 HTML 和 JQuery

​​>

我的 HTML：

<tr class = "oneResultat" href = "annonce.php">
    ...
</tr>

我的 JQuery：

jQuery(document).ready(function($) {
    $(".oneResultat").click(function() {
        window.document.location = $(this).attr("href");
    });
});

Answer 1

您可以将td 内容嵌入<a> 标记中，或者您可以种植一个没有内容（但地址）的“透明”<a> 标记，它将绝对定​​位并覆盖整个<tr> . 看这里： http://jsbin.com/gelezubake/1/edit?html,output

右键单击 -> 可以通过 JS 捕获鼠标右键单击和工具提示来打开，并带有打开新窗口的选项（带有参数的 window.open）

Answer 2

在浏览器中获得默认锚点处理的唯一方法是使用锚点！但是由于您不能将TR 包装在一个锚点中，因此您必须将每个TD 的内容包装在一个锚点中。如果您的TD 被渲染成没有它们之间的间隙，这将最有效。

HTML：

<tr class="oneResultat" data-href="annonce.php"> ... </tr>

Javascript：

jQuery(document).ready(function($) {
  var $oneTR = $(".oneResultat");
  var href = $oneTR.attr("href");
  var wrap = "<a href='"+href+"'></a>";
  $("tr.oneResultat > td").wrapInner(wrap);
});

可能的 CSS 使锚点在 TD 中全角显示：

tr.oneResultat > td > a {
  display:block;
  width:100%;
  height:100%;
}

请注意，这会创建由左键单击而不是右键单击触发的常规锚点。如果您必须使用右键单击，则制作锚点href='#' 并在这些锚点上附加click 的事件处理程序，然后调用众多jQuery 上下文菜单插件之一来呈现上下文相关菜单。如果您想要一个示例，请告诉我，但现在我假设您想要常规的左键单击浏览器锚点行为。

Answer 3

你可以使用 css cursor: pointer;

cursor 属性指定指向元素时要显示的光标类型。

.oneResultat {
cursor: pointer;
}

---

编辑：

对于右键单击上下文菜单，我编写了 js，它在 tr 上侦听上下文菜单并在事件目标 (td) 上附加 a，一旦释放上下文 a 删除并将 html 重新附加到 td。

(function(){
var item, isIntextMenuOpen;

$('[data-href]')
.on('click', function(e){
        window.document.location = $(this).attr('data-href');
})
.on('contextmenu', function(e){
    var href=$(this).attr('data-href');

    item=$(e.target);
    item.wrapInner('<a href="'+href+'">');
    isIntextMenuOpen = true;
});

function hideContextmenu(e){
       if(isIntextMenuOpen ){
          var children = item.children('a'),
          $child = $(children[0]),
          html = $child.html();

           $child.remove();
           item.html(html);

       }

     isIntextMenuOpen = false;
}
$(window).blur(hideContextmenu);

$(document).click(hideContextmenu);
})();

工作的jsbin： http://jsbin.com/qovejasuso/1/

Answer 4

你的 oneResultat 类应该在一个 css 文件或样式属性中，例如：

<style>
tr.oneResultat {
   text-decoration: underline;
   cursor: pointer;
}

tr.oneResultat:hover {
   color: #0000ee;
}

tr.oneResultat:visited {
   color: #747EBD;
}

</style>

Answer 5

不要使用表格标签，而是使用带有这些 css 属性的 div

将 <table> 替换为 <div class="table">
将 <tr> 替换为 <div class="tr">
将 <td> 替换为 <div class="td">

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}