When hovering over an element with a common attribute, such as a class name, I want to change the style of all elements that share that attribute. Achieving this effect is simple with jQuery:
$(function() {
$('.bookId4').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
However, I am unsure how to implement this feature using Angular. In my scenario, the elements with the class .bookId4 are dynamically generated through an Angular AJAX call, so I am looking for a way to create the hover effect in Angular as well. Thank you!
EDIT
To elaborate further, multiple divs will be created via an AJAX call, and these divs within the same group will share the same class. Here is the HTML code snippet:
<div class="bookId{{ privateTour.booking.id }}"> <!-- Wrapper for hover effect -->
When hovering over one div, I want ALL divs (not just the hovered one) with the same class or another shared value to exhibit the hover effect. Ideally, Angular should search the entire page for all divs with a certain class name and apply the desired style to achieve this, instead of having to manually generate CSS for each class, which may not even work effectively.