How do I light up an entire single row by hovering on a span in one of the columns?

Question

If I hover over the span with class "fromThisSpan", how do I change the background-color of the div that contains classes row and highlightThisRow?

There are a bunch of rows in the ul, and each row has a few columns. The span is in the last column. The span also has a hover in the css (I didn't include it here).

So far, at one point I did get the desired results, but only for the first row. I was using id's instead of classes for the div and span.

I've added a couple of my failed attempts of my jquery below.

This is a composite outline of the structure I'm using to show where I'm going with this only. It's not a working code. The problem I'm having is with the 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>

Here I was trying to attach the hover event using the .on()

[ jquery ]

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

This is an SO post I found and decided to give it a try, but didn't work for me.

The source: Adding hover CSS attributes via jQuery/Javascript

[ jquery ]

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

[ UPDATE ] Solved This was the solution that worked in my case.

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

@madalin ivascu the jsfiddle you posted is exactly what I'm trying to do. For some reason in my code it's not working. I'm wondering if my css is interfiering with the jq hover. I've tried your solution and modified my code accordingly without results. — nocturns2, Sep 23 '16 at 07:51
@Lalji Tadhani I was first wondering about the parent, but didn't know how to apply it. I'm sure both you solution and madalin ivascu's would both work. I think I have some css to figure out. I also have some other hovers in the elements on the other columns. — nocturns2, Sep 23 '16 at 07:54
@madalin ivascu I've updated my OP with the original solution you provided using the .closest() and marked your solution as answered. — nocturns2, Sep 23 '16 at 08:25

madalinivascu · Accepted Answer · 2016-09-23T07:54:19.837

2

Use closest to get the relative highlightThisRow of the element selected

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

or:

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

demo:https://jsfiddle.net/7bgqfdkj/

edited Sep 23 '16 at 07:54

answered Sep 23 '16 at 07:21

madalinivascu

32,064
4
39
55

please see my comments on my OP above. – nocturns2 Sep 23 '16 at 07:47
1

I got it to work with the .closest in spite of my other hovers on the row. It had to do with my actual class names. – nocturns2 Sep 23 '16 at 08:06

score 2 · Answer 2 · answered Sep 23 '16 at 07:22

2

try (this).parent

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

answered Sep 23 '16 at 07:22

Lalji Tadhani

14,041
3
23
40

please see my comments on my OP above. – nocturns2 Sep 23 '16 at 07:46

How do I light up an entire single row by hovering on a span in one of the columns?

2 Answers2