CODEWITHSUNDEEP
javascriptjquery
Saket B
Saket B

Reputation: 41

How to select elements while hovering

How can I select elements while I hover them on HTML. Like if I hover a div or its child then I need my control over it. I want to show a border around it. my code is

jQuery(document).ready(function(){
    $(window).bind('mousemove', function(e) {
        current_id = $(e.target).attr('id');
        jQuery('#'+current_id).css('border','2px solid yellow');        
    });
});

But this code will gives me control if I hover a specific div but I need I can show a border even if I am hovering inside a div and same if that div contains a child than on hovering it I can get a border around that child not that parent div.

Upvotes: 0

Views: 148

Answers (2)

dfsq
dfsq

Reputation: 193261

If you just want to show a border on any element on the page, you probably can do it without JS, jut with CSS only:

*:hover {
    border: 2px solid yellow;
}

(for debug purposes it's better to use outline instead of border)

Upvotes: 2

sdespont
sdespont

Reputation: 14025

Use the hover event on all div elements. I have created a new class to apply and remove easily the styles applied. You could also add more selectors if you need to apply this style to input elements or span for exemple :

$('div, span, input').on('hover', ...);

<style>
    .myBorder{
        border : 2px solid yellow;
    }
</style>

$('div').on('hover', 
    function(e) {
        $(this).addClass('myBorder');
    },
    function(e){
        $(this).removeClass('myBorder');
    }
);

Upvotes: 0

Related Questions