Question

以下是我正在使用的功能，以突出显示正在悬停的行。

当我的目标是从stripe_table类中选择tbodies时，我无法理解如何实现这一目标。一旦将其设置为事件侦听器，我需要让a和td nodeNames响应mouseover事件，从而突出显示其父行。

有人可以解释一下可以实现这一目标的步骤吗？我如何从悬停的a或td元素遍历DOM以找到其父行？

谢谢！

在mouseover和mouseout上将tbody设置为eventlistener 对a和td元素做出反应 - ＆gt;修改tr - 找到目标元素的祖先表行 - 然后您将突出显示应用于该表行 - 遍历DOM运行一个重置事件的循环 --target元素到其父节点，直到节点名称为止 --parent等于在mouseout事件中，需要恢复格式化* /

//Set up Hover Events

function addEvent( obj, type, fn ) {

    if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn] ( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
         obj.addEventListener(type, fn, false);
    }

    function setUpFieldEvents(){
         var stripeTables = document.getElementsByClassName("stripe_table");
         var tableBodies = stripeTables.tBodies;

             addEvent(tableBodies, "mouseover", hoverHighlight);
             addEvent(tableBodies, "mouseout", undoHighlight);
    }

    function hoverHighlight(){
            var stripeTables = document.getElementsByClassName("stripe_table");
            var tableBodies = stripeTables.tBodies;
            var tableData = tableBodies.getElementsByTagName("td");
    }

    function undoHighlight(){

    }

Answer 1

您是否尝试过使用CSS，例如

tr:hover{
 background:red;
}

如果你想使用jQuery，那么“walkthrough here就相当不错了，如果你想要纯粹的JS-请看看here部分＆＃39;使用鼠标事件处理程序和行检测＆＃39;

Answer 2

可能只能使用css hover

其他选项是使用javascript（或jquery）.mouseover （.mouseenter .mouseleave可能就是你要找的东西）

编辑：

$('tbody#tbodyId tr').mouseenter(function(){/*do stuff */});

So if you wanted to change color I'd do something like

$('tbody#tbodyId tr').mouseenter(function(){
$(this).css('background') = 'red';
});

$('tbody#tbodyId tr').mouseleave(function(){
$(this).css('background') = /*whatever old color was */
});

Answer 3

如果你愿意，jQuery可以轻松实现。

HTML：

<table>
    <tbody class="stripe_table">
        <tr>
            <td>One</td>
            <td>Two</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Three</td>
            <td>Four</td>
        </tr>
    </tbody>
</table>

JS：

$('.stripe_table').hover(
  function() {
    $(this).addClass('highlight');
  }, function() {
    $(this).removeClass('highlight');
  }
)

CSS：

.highlight{
    background:red;
}

jsFiddle：http://jsfiddle.net/kB7u2/1/

使用Javascript和CSS在鼠标悬停上突出显示表格的行

3 个答案: