使元素表现得像链接的JavaScript或JQuery-onmouseover或悬停？

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

在浏览器中获取默认锚点处理的唯一方法-使用锚点！但是，由于无法将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 contextmenu插件之一来呈现上下文相关菜单。让我知道是否需要一个示例，但现在我假设您需要常规的左键单击浏览器锚点行为。

Answer 2

您可以将td内容嵌入<a>标签中，也可以植入不包含内容（但包含地址）的“透明” <a>标签，该标签将完全定位并覆盖整个<tr>。看这里：http://jsbin.com/gelezubake/1/edit?html,output

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

Answer 3

您可以使用CSS cursor: pointer;

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

.oneResultat {
cursor: pointer;
}

---

编辑：

对于右键单击上下文菜单，我编写了js，该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

而不是使用表标签，而是将div与这些CSS属性一起使用

用<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;
}