Emphasize an element when hovering over it

Question

Emphasize an element when hovering over it

I am looking to create a custom hover effect for highlighting elements in a Chrome extension I'm developing. The goal is to achieve a similar behavior to using the magnifying glass tool in Chrome Dev Tools, where only the hovered element is highlighted.

After exploring CSS pseudo :hover and trying various jQuery solutions, I have found that these methods also apply the hover effect to container elements due to event bubbling. Preventing this behavior with CSS alone seems impossible.

One attempted solution involved using JavaScript to remove and add a specific class on mouseover, but it still selected parent elements along with the target element.

.hova {
    background-color: pink;
}

Another approach was using CSS opacity to highlight the element, but ultimately had the same issue with selecting parent elements instead of just the targeted one.

It seems like there should be a straightforward solution out there, potentially being over complicated by the fact that it's part of a Chrome extension development. I'm open to any suggestions or advice on achieving the desired hover effect.

javascript jquery css google-chrome google-chrome-extension

Answer 1

Answer №1

Is this the solution you're looking for? http://jsbin.com/vidojamece/1/

Instead of applying the class directly to $(this) in the event handler, apply it to e.target (span) and prevent bubbling up to the div by returning false:

$('body').children().mouseover(function(e){
    $(".hova").removeClass("hova");     
    $(e.target).addClass("hova");
  return false;
}).mouseout(function(e) {
    $(this).removeClass("hova");
});

Answer 2

Is this the solution you're looking for? http://jsbin.com/vidojamece/1/

Instead of applying the class directly to $(this) in the event handler, apply it to e.target (span) and prevent bubbling up to the div by returning false:

$('body').children().mouseover(function(e){
    $(".hova").removeClass("hova");     
    $(e.target).addClass("hova");
  return false;
}).mouseout(function(e) {
    $(this).removeClass("hova");
});

Answer 3

Answer №2

To prevent repeating the process for each element behind, it is recommended to utilize the target element instead of 'this' when hovering over and incorporate stopPropagation:

$('body').children().mouseover(function(e){

    e.stopPropagation();

    $(".highlight").removeClass("highlight");     
    $(e.target).addClass("highlight");
}).mouseout(function(e) {
    $(e.target).removeClass("highlight");
});

Answer 4

To prevent repeating the process for each element behind, it is recommended to utilize the target element instead of 'this' when hovering over and incorporate stopPropagation:

$('body').children().mouseover(function(e){

    e.stopPropagation();

    $(".highlight").removeClass("highlight");     
    $(e.target).addClass("highlight");
}).mouseout(function(e) {
    $(e.target).removeClass("highlight");
});

Answer 5

Answer №3

If you want to add some flair to your website, you can use CSS and JavaScript to achieve it:

*:hover {
    background-color: pink;
}

You can also target specific elements like this:

div:hover {
    background-color: pink;
}

In JavaScript:

$('body').children().each(function() {
    $(this).hover(function() {
        $(".hova").removeClass("hova");     
        $(this).addClass("hova");
    }, function() {
        $(this).removeClass("hova");
    });
});

Answer 6

If you want to add some flair to your website, you can use CSS and JavaScript to achieve it:

*:hover {
    background-color: pink;
}

You can also target specific elements like this:

div:hover {
    background-color: pink;
}

In JavaScript:

$('body').children().each(function() {
    $(this).hover(function() {
        $(".hova").removeClass("hova");     
        $(this).addClass("hova");
    }, function() {
        $(this).removeClass("hova");
    });
});

Emphasize an element when hovering over it

Answer №1

Answer №2

Answer №3

Similar questions

Using XMLHttpRequest for making PHP AJAX requests

Challenges encountered on Chrome browser when using label:hover along with relative positioning

Expand the size of bootstrap-datepicker to fill the entire screen

Utilize CSS scrolling to present all items in a single line

Date selection tool in Bootstrap showing blank field

Utilize Multer to upload images stored within an array of objects

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

AngularJS - Optimizing Video Loading Time

How do you start the React number input control with an empty value?

Applying custom CSS designs to images using Thymeleaf

Searching for a way to access the child window URL within the parent window on a React.JS platform?

Troubleshooting Handlebars XML Parsing Issues on Firefox

li rel=identifier

Why are certain items excluded from comparison within a sorting algorithm?

MongoDB failing to enforce unique constraints on partial indexes

My app.js failed to launch on Heroku, receiving a Code H10 status 503 error

Guide on implementing register helpers with node.js and express handlebars

Excessive content spillage occurs on React Slick slides during rendering

Arrange data into columns on a website

Activate all inactive input and selection elements