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

Question

以下是我用来突出显示鼠标悬停的行的函数。

当我想要从stripe_table类选择tbodies时，我无法理解如何实现这一目标。 一旦将其设置为事件监听器，我需要使a和td nodeName对mouseover事件做出响应，并因此突出显示其父行。

有人可以解释一下允许完成这个任务的步骤吗？我该如何遍历DOM以从悬停的a或td元素找到其父行？

谢谢！

将tbody设置为mouseover和mouseout的事件监听器 响应a和td元素->修改tr 找到目标元素的祖先表格行 以便将高亮显示应用于该表格行 要遍历DOM，请运行一个循环，将事件目标元素重置为其父节点，直到父节点的节点名称等于 在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(){

    }

- meisterburger

Answer 1

你尝试过只使用CSS吗，例如：

tr:hover{
 background:red;
}

如果你想使用jQuery，这里有一个相当不错的教程，如果你想要使用纯JS，请看这里，请看“使用鼠标事件处理程序和行检测”一节。

- SW4

---

尽管这种方法非常理想，但对于此事来说却不是一个选项。正在练习我的Javascript:/ - meisterburger

@meisterburger 除非你真的需要，否则不应该使用JavaScript。尝试练习一些无法使用CSS实现的功能。 - dsgriffin

很遗憾，我必须…… - meisterburger

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 */
});

- echochamber

---

如何使用mouseover？Tbody是事件监听器，我需要tr和a元素成为当鼠标悬停时导致它们所在行通过css高亮显示的元素...您有什么想法吗？ - meisterburger

编辑了主贴并附上了示例。Hunter的示例比我的好。 - echochamber

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/

这句话是关于编程的内容，其中提到了一个链接，可能是一个示例代码或者一个网页，但是具体是什么我不会解释。同时，保留了html格式。

- Hunter