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

Question

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

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

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

谢谢！

在mouseover上将tbody设置为eventlistener，mouseout对a和td元素做出反应 - >修改tr - 查找目标元素的祖先表行 - 然后将突出显示应用于该表行 - 要遍历DOM运行一个循环将event --target元素重置为其父节点，直到--parent的节点名称等于On 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，有一个相当不错的演练在这里 ，如果你想纯JS-看看这里下的部分“使用鼠标事件处理程序和行检测”

Answer 2

可能只能使用css悬停

其他选项是使用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/