Hovering over the TR element will result in an impact on B

Question

Hovering over the TR element will result in an impact on B

I created a unique table layout that looks like this:

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

There are two key features I want to implement:

When hovering over tr.place, it should also activate the hover effect on tr.anHour (or td.hour).
When hovering over tr.anHour (or td.hour), it should activate the hover effect on all tr.place elements.

Any ideas on how to achieve this? Let me know!

javascript html css

Answer 1

Answer №1

Creating this effect purely with CSS is not possible. While you can change the style of the place elements using a general sibling combinator (

.anHour:hover ~ .place { /* styles */}

), you cannot determine the styling of an earlier sibling based on the state of a later one.

Instead, you can utilize the mouseenter and mouseleave events to add or remove classes. Although it may not be exactly the same as triggering hover, it achieves a similar outcome.

Below is an example that showcases CSS for one part and JavaScript for the other so you can observe both in action:

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

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

<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 2

Creating this effect purely with CSS is not possible. While you can change the style of the place elements using a general sibling combinator (

.anHour:hover ~ .place { /* styles */}

), you cannot determine the styling of an earlier sibling based on the state of a later one.

Instead, you can utilize the mouseenter and mouseleave events to add or remove classes. Although it may not be exactly the same as triggering hover, it achieves a similar outcome.

Below is an example that showcases CSS for one part and JavaScript for the other so you can observe both in action:

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

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

<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 3

Answer №2

Styling with CSS

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

The ~ symbol is a successor siblings selector that only works for succeeding elements. For previous siblings, you can use jQuery by adding "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" and using the hover() function.

jQuery Script

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

});

Answer 4

Styling with CSS

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

The ~ symbol is a successor siblings selector that only works for succeeding elements. For previous siblings, you can use jQuery by adding "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" and using the hover() function.

jQuery Script

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

});

Answer 5

Answer №3

Below is an example of using JQuery to add hover effects:

$('.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 6

Below is an example of using JQuery to add hover effects:

$('.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 7

Answer №4

If you want to apply CSS styles based on certain conditions, you should familiarize yourself with CSS selectors.

One method is to ensure that the element you want to modify appears before the element that triggers the change.

CSS

.place:hover ~ .anHour {
    /*Include your CSS code here*/
}

The above code snippet will activate the specified CSS properties on all sibling elements with a class of .anHour when any element with a class of .place is hovered over.

Alternatively, you can achieve this using jQuery.

jQuery

$(function() {
  $('.place').hover(function() {
    $('.anhour').css();
  }, function() {
    // Reset the CSS properties on mouseout
    $('.anhour').css();
  });
});

Answer 8

If you want to apply CSS styles based on certain conditions, you should familiarize yourself with CSS selectors.

One method is to ensure that the element you want to modify appears before the element that triggers the change.

CSS

.place:hover ~ .anHour {
    /*Include your CSS code here*/
}

The above code snippet will activate the specified CSS properties on all sibling elements with a class of .anHour when any element with a class of .place is hovered over.

Alternatively, you can achieve this using jQuery.

jQuery

$(function() {
  $('.place').hover(function() {
    $('.anhour').css();
  }, function() {
    // Reset the CSS properties on mouseout
    $('.anhour').css();
  });
});

Hovering over the TR element will result in an impact on B

Answer №1

Answer №2

Answer №3

Answer №4

CSS

jQuery

Similar questions

Learn the art of separating a CSS attribute and its value with Jquery

Using Node.js, we can create a program that makes repetitive calls to the same API in a

The confusion arises from the ambiguity between the name of the module and the name of

Trying out a TypeScript class created with Jasmine testing

Can AngularJS filter be used with an array of strings for sorting?

When async is set to true in an Ajax call, the response may come

Generate dynamic Bootstrap Carousel slides with unique hashtag URLs

The issue of banding caused by Bloom and Antialiasing in Three.js rendering

Display a notification when a user logs in for the very first time

Tips for adjusting the size of a background image using zoom

Time whizzes by too swiftly

Why is it that one of my useQuery hooks is returning a value while the other one is returning undefined?

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

Show whether the day is even or odd with the JavaScript getDay object

What is the best way to use jQuery to toggle the hidden class on an inner div when a button inside a card is clicked?

Maintain the aspect ratio of an image within a flex container when the height is adjusted

The input value in the HTML form was altered momentarily before reverting back to its original state

Problems arise with identification of asynchronous functions

Conceal specific image(s) on mobile devices

Is Angular causing the issue with Datalist not functioning in IE9?