If I want to change the background-color of a div with classes "row" and "highlightThisRow" when hovering over a span with the class "fromThisSpan", how can I achieve that?
In a list, there are multiple rows with several columns. The span in question is located in the last column and has a hover effect defined in the CSS.
Although I managed to get the desired outcome for the first row by using IDs instead of classes for the div and span, I am struggling to apply the same effect to all rows.
Below are some unsuccessful attempts at achieving this using jQuery:
This code snippet represents the structure I am working with and does not include functioning code, only an outline:
<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 is one failed attempt using the .on() method to attach the hover event:
$(".fromThisSpan").on("hover", $(".fromThisSpan").hover(
(new function () {
$(".highlightThisRow").css("background-color", "#fce2e2");
}),
(new function () {
$(".highlightThisRow").css("background-color", "#ffffff");
})
));
I also tried another approach based on a suggestion from Stack Overflow, but it didn't work either:
Source: Adding hover CSS attributes via jQuery/Javascript
$(".fromThisSpan").mouseenter(function () {
$(".highlightThisRow").css("background-color", "#fce2e2");
}).mouseleave(function () {
$(".highlightThisRow").css("background-color", "#ffffff");
});
[ UPDATE ] Solved After experimenting further, I found a solution that worked in my scenario:
$(".fromThisSpan").hover(function () {
$(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
}, function () {
$(this).closest(".highlightThisRow").css("background-color", "#ffffff");
});