Question

我有这样的HTML：

<table>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

</table>

Delete Link隐藏在上面的HTML中。我想在鼠标悬停在相关的Delete Link

上时显示record DIV

在尝试了 prototypejs 的一些基本教程之后，我能够编写以下代码，这些代码对我有用但尚未完成。

document.on('mouseover', 'div.record', function(event, element) {
    event.target.hide(); // testing: it hides the record itself
});

以下代码对我来说无效：

$('delete').setStyle({ display: 'block' });
$$('div.delete').setStyle({ display: 'block' });

Answer 1

尝试CSS：

table#mytable tr:hover .delete{  /*identify your table for this effect, so as not to affect other tables*/         
    display:block !important;    /* !important is needed for override since */ 
}                                /* you styled "display:none" on element level */

它的作用是检测从父级别（CSS确实冒泡）在子级上进行悬停，然后为受影响的元素设置样式。

Answer 2

在Prototype中，通过设置$("delete")，您调用的是id delete的元素，我在任何地方都看不到。您需要设置<div id='delete' style='display:none;'>Delete Link</div>

并使用以下命令绑定事件并以不引人注目的方式启动脚本，

编辑因为有很多div.delete使用$$（）选择器，如下所示

     document.observe("dom:loaded", function(){
     var deleteLinks=$$(".delete");
     for(var i=0;i<deleteLinks.length;i++){

        deleteLinks[i].observe("mouseover",functio(){
          this.setStyle({ display: 'block' });


        }); //bind event

      }
    });

如果您想隐藏在mouseover设置display:none而不是display:block 您也可以使用visibility:hidden，但仍会占用html空间区域部分

如何将鼠标悬停在另一个div上？

2 个答案: