Javascript 如何通过将光标悬停在其中一列的跨距上点亮整个单行？

如果将鼠标悬停在类为“fromThisSpan”的范围上，如何更改包含classes行和highlightThisRow的div的背景色

ul中有一组行，每行有几列。 跨度在最后一列中。span在css中也有一个悬停（我在这里没有包括它）

到目前为止，我确实在某一点上得到了预期的结果，但仅限于第一行。 对于div和span，我使用的是id而不是类

我在下面添加了几次失败的jquery尝试

这是一个结构的合成轮廓，我用它来表示我要做的只是这个。 这不是一个有效的代码。我遇到的问题是jquery。 [html/razor]

<ul>
    @foreach(ItemType item in ItemCollection)
    <li>
        <div class="row highlightThisRow">
            <div class="col-md-4">
                ... item.contents1
            </div>
            <div class="col-md-4">
                ... item.contents2
            </div>
            <div class="col-md-4">
                ... item.contents3
                <span class="fromThisSpan"><a href="*" title="Delete this row">Delete</a></span>
            </div>
        </div>
    </li>
</ul>

这是我找到的一个非常好的帖子，我决定尝试一下，但对我来说不起作用

资料来源：

[jquery]

$(".fromThisSpan").on("hover", $(".fromThisSpan").hover(
        (new function () {
            $(".highlightThisRow").css("background-color", "#fce2e2");
        }),
        (new function () {
            $(".highlightThisRow").css("background-color", "#ffffff");
        })
    ));

$(".fromThisSpan").mouseenter(function () {
    $(".highlightThisRow").css("background-color", "#fce2e2");
}).mouseleave(function () {
    $(".highlightThisRow").css("background-color", "#ffffff");
});

[更新]已解决 这就是在我的案例中有效的解决方案

$(".fromThisSpan").hover(function () {
    $(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
}, function () {
    $(this).closest(".highlightThisRow").css("background-color", "#ffffff");
});

---

使用

最近的

获取所选元素的相对高亮显示ThisRow

$(function(){
    $(".fromThisSpan").mouseenter(function () {
        $(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
    }).mouseleave(function () {
        $(this).closest(".highlightThisRow").css("background-color", "#ffffff");
    });
});

或：

---

演示：

使用

最近的

获取所选元素的相对高亮度此行

$(function(){
    $(".fromThisSpan").mouseenter(function () {
        $(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
    }).mouseleave(function () {
        $(this).closest(".highlightThisRow").css("background-color", "#ffffff");
    });
});

或：

演示：

试试

（这个）。家长

$("#fromThisSpan").on("hover", $("#fromThisSpan").hover(
        (new function () {
            $(this).parent("#highlightThisRow").css("background-color", "#fce2e2");
        }),
        (new function () {
            $(this).parent("#highlightThisRow").css("background-color", "#ffffff");
        })
    ));

尝试
（此项）。父项

$("#fromThisSpan").on("hover", $("#fromThisSpan").hover(
        (new function () {
            $(this).parent("#highlightThisRow").css("background-color", "#fce2e2");
        }),
        (new function () {
            $(this).parent("#highlightThisRow").css("background-color", "#ffffff");
        })
    ));

请查看我对上面我的操作的评论。请查看我对上面我的操作的评论。请查看我对上面我的操作的评论。尽管我在行上的其他鼠标悬停，我还是使用了。最近的。这与我的实际类名有关。请查看我在上面的OP上的评论。尽管我在行上有其他悬停，但我还是使用了.closest。这与我的实际类名有关。@madalin ivascu您发布的JSFIDLE正是我想要做的。由于我的代码中的某些原因，它不起作用。我想知道我的css是否与jq悬停交互。我已经尝试了你的解决方案，并相应地修改了代码，但没有结果。@Lalji Tadhani我最初对父项感到疑惑，但不知道如何应用它。我相信你的解决方案和madalin ivascu的都能奏效。我想我有一些css需要弄清楚。我在其他列的元素中还有一些其他悬停。@madalin ivascu我已经用您使用.closest（）提供的原始解决方案更新了我的OP，并将您的解决方案标记为已回答。@madalin ivascu您发布的JSFIDLE正是我要做的。由于我的代码中的某些原因，它不起作用。我想知道我的css是否与jq悬停交互。我已经尝试了你的解决方案，并相应地修改了代码，但没有结果。@Lalji Tadhani我最初对父项感到疑惑，但不知道如何应用它。我相信你的解决方案和madalin ivascu的都能奏效。我想我有一些css需要弄清楚。我在其他列的元素中还有一些其他的悬停。@madalin ivascu我已经用您使用.closest（）提供的原始解决方案更新了我的OP，并将您的解决方案标记为已回答。