Question

我有一张像这样的表：

<table>
   <tr class="anHour">
      <td class="hour" rowspan="3">9:00</td>
   </tr>
   <tr class="place">                                       
      <td>Place 1</td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="place">
      <td>Place 2</td>
      <td></td>
      <td></td>
      <td></td>                               
   </tr>
</table>

我想要两件事：

每当激活tr.place的悬停时，它应该影响tr.anHour（或td.hour）以激活其悬停状态。
每当tr.anHour（或td.hour）的悬停被激活时，它应该影响所有tr.place以激活它们的悬停状态。

我该怎么做？

Answer 1

你无法用CSS完全做到这一点。您可以通过general sibling combinator（place更改.anHour:hover ~ .place { /* styles */}元素的样式，但是您无法进行相反的操作，因为您无法确定<的样式em>之前的兄弟基于以后的状态。

相反，您可以使用mouseenter和mouseleave添加/删除类。这与激活hover并不完全相同，但它可以产生相同的效果。

以下是第一个使用CSS而第二个使用JavaScript的示例（因此您可以看到两者都有效）：

＆＃13;

Array.prototype.forEach.call(
  document.querySelectorAll(".place"),
  function(place) {
    place.addEventListener("mouseenter", handlePlaceMouseEnter);
    place.addEventListener("mouseleave", handlePlaceMouseLeave);
  }
);
function handlePlaceMouseEnter() {
  this.parentNode.querySelector(".anHour").classList.add("hover");
}
function handlePlaceMouseLeave() {
  this.parentNode.querySelector(".anHour").classList.remove("hover");
}

＆＃13;

.anHour:hover ~ .place, .place:hover {
  color: green;
}
.anHour:hover, .anHour.hover {
  color: blue;
}

＆＃13;

<table>
   <tr class="anHour">
      <td class="hour" rowspan="3">9:00</td>
   </tr>
   <tr class="place">                                       
      <td>Place 1</td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="place">
      <td>Place 2</td>
      <td></td>
      <td></td>
      <td></td>                               
   </tr>
</table>

＆＃13;

Answer 2

css

.anHour : hover ~ .place {background: #9bcc41 }

〜是继承兄弟选择器，仅适用于后继者，对于之前的兄弟姐妹，您需要添加“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”并尝试jquery函数hover()。

<强>脚本

$(document).ready(function(){
        $('.place').hover(function(){ //Style on hover 
            $('.anHour').css({"background": " #9bcc41"});
            },    
            function(){ //Style when not hovered
            $('.anHour').css({"background": "none"});   
            });         

        });

Answer 3

使用JQuery：

$('.place td').mouseenter(function() {
	$('.anHour').addClass('hover');
}).mouseleave(function() {
	$('.anHour').removeClass('hover');
});

.anHour.hover {
    background-color: red;
}
.anHour:hover ~ tr {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr class="anHour">
      <td class="hour" rowspan="3">9:00</td>
   </tr>
   <tr class="place">                                       
      <td>Place 1</td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="place">
      <td>Place 2</td>
      <td></td>
      <td></td>
      <td></td>                               
   </tr>
</table>

Answer 4

您需要查看css选择器。

只有在触发元素之前放置要受影响的元素时才可以这样做。

CSS

$(function() {
  $('.place').hover(function() {
    $('.anhour').css();
  }, function() {
    // on mouseout, reset the background colour
    $('.anhour').css();
  });
});

上面的代码将在悬停任何.place元素时执行，它将触发所有.anHour兄弟元素的css。

另一种方法是使用jquery

Jquery的

{{1}}

TR悬停影响兄弟

4 个答案:

CSS

Jquery的