Choose all elements that share a common class

Question

Choose all elements that share a common class

I want to create a hover effect that highlights all elements on a page with the same class.

This is the code I currently have:

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $(this).addClass('hover');
});
$('p.myclass').mouseout(function () {
    $(this).removeClass('hover');
});
});

Here is my example on JSFiddle

At the moment, only the element being hovered over gets highlighted. Is there a way to make it highlight ALL elements with the same class? I'm open to using either CSS3 or jQuery to achieve this.

jquery css

Answer 1

Answer №1

When using the mouseover event handler, keep in mind that it attaches an event handler to each individual element within your selected collection. This means that the context of this inside the callback function will refer to the specific element being hovered over, not the entire collection. To avoid confusion, it's recommended to use the selector itself instead of this.

$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});

Another approach for optimization is caching your collection and referencing it for improved efficiency:

var coll = $('p.myclass');
coll.mouseover(function () {
    coll.addClass('hover');
});

Answer 2

When using the mouseover event handler, keep in mind that it attaches an event handler to each individual element within your selected collection. This means that the context of this inside the callback function will refer to the specific element being hovered over, not the entire collection. To avoid confusion, it's recommended to use the selector itself instead of this.

$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});

Another approach for optimization is caching your collection and referencing it for improved efficiency:

var coll = $('p.myclass');
coll.mouseover(function () {
    coll.addClass('hover');
});

Answer 3

Answer №2

Implement this jQuery function to add a hover effect to paragraphs with the class "myclass":

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});
$('p.myclass').mouseout(function () {
    $('p.myclass').removeClass('hover');
});
});

Answer 4

Implement this jQuery function to add a hover effect to paragraphs with the class "myclass":

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});
$('p.myclass').mouseout(function () {
    $('p.myclass').removeClass('hover');
});
});

Choose all elements that share a common class

Answer №1

Answer №2

Similar questions

Generating a list item element based on the input value

Turn off the ripple effect for this element

Troubles with Bootstrap's column functionality causing issues

"Automatically close the fancybox once the form is confirmed in the AJAX success

rails/jquery/ajax: The completion function is not being triggered

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

Align a Font Awesome icon vertically within a table cell that has a dynamic height

What is the best way to ensure that the positioning of the text adapts to

Enhancing user experience with dynamic search results: JQuery AutoComplete powered by XML

Tips for securing a navbar in material ui

Trouble displaying data in Jquery JSON

Strategies for incorporating foreign keys into SQL database architecture

JavaScript not functioning properly with HTML loaded via .load()

Firefox fails to trigger HTML drag event

Creating an Angular 7 Template using HTML CSS and Javascript

Automatically change and submit an <input> value using jQuery

Tips for invoking a JavaScript function script through PHP

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

What is the alternative to jQuery.submit now that it has been deprecated in version 3.3?

Dropdown CSS navigation menu