如何通過懸停在某一列的跨度上來點亮整行？

如果我將鼠標懸停在類「fromThisSpan」的跨度上，如何更改包含類行和highlightThisRow的div的背景顏色？如何通過懸停在某一列的跨度上來點亮整行？

ul中有一堆行，每行都有幾列。跨度在最後一列。跨度也有懸停在CSS（我沒有在這裏包括它）。

到目前爲止，在某一點上，我確實得到了預期的結果，但僅限於第一行。我使用的是id而不是div和span的類。

我已經添加了一些我的失敗嘗試我的jquery下面。

這是我使用的結構的綜合輪廓，以顯示我只用這個的位置。這不是一個工作代碼。我遇到的問題是與jQuery。 [HTML /剃刀]

<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"); 
     }) 
    ));

這是一個張貼SO我發現和決定試一試，但沒有爲我工作。

來源：Adding hover CSS attributes via jQuery/Javascript

[jQuery的]

$(".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"); 
});

來源

2016-09-23 nocturns2

@madalin ivascu你張貼的jsfiddle正是我想要做的。由於某些原因，我的代碼不起作用。我想知道我的css是否與jq懸停在一起。我已經嘗試了您的解決方案並相應地修改了我的代碼而沒有結果 – nocturns2

@Lalji Tadhani我第一次想知道父母，但不知道如何應用它。我相信你們的解決方案和madalin ivascu都可以工作。我想我有一些CSS可以弄清楚。其他專欄中的元素也有其他一些盤旋。 – nocturns2

@madalin ivascu我已經使用.closest（）提供的原始解決方案更新了OP，並將您的解決方案標記爲已回答。 – nocturns2

使用closest來獲取元素的相對highlightThisRow選擇

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

或：

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

演示：https://jsfiddle.net/7bgqfdkj/

來源

2016-09-23 07:21:05 madalinivascu

請在上面看到我對我的OP的評論。 – nocturns2

在文檔就緒函數中包裝您的代碼 – madalinivascu

請參閱我的更新回答 – madalinivascu

嘗試(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"); 
     }) 
    ));

來源

2016-09-23 07:22:16

請在我上面看到我對我的評論。 – nocturns2

如何通過懸停在某一列的跨度上來點亮整行？

回答

相關問題