How to make a css class work for only one object at a time?

Question

I want a css class to work for only one object at a time. I want to activate it only when I hover over an object with that class. When my cursor leaves that object the class should still be activated. But when I hover over a second object with that class it should simultaneously start working for that object and stop working for the previous object.

The css I am trying to implement this way is for a set of thumbnail images and is as follows

{
box-shadow: 0 0 5px red; 
}

None of the images should have this css activated by default when the page loads. How do I do it? Open to any kind of solution here css/javascript/jquery/plugin/anything elce. Can anyone help?

Answer 1

Use :hover :

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

REF: https://developer.mozilla.org/en/docs/Web/CSS/:hover

 div:hover { box-shadow: 0 0 5px red; } 

 <div>11111</div> <div>22222</div> <div>33333</div> 

Solution 2: use mouseover event (or hover as @abeyaz's answer), remove all active then add the active class to the current one.

The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (eg a button.)

The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.

jQuery provides hover() as a convient way to handle common UI hovering states.

mouseover() is more for manually accessing the specific browser event.

REF: https://www.quora.com/jQuery/jQuery-What-is-the-difference-between-the-hover-and-mouseover-functions

 $('div').on('mouseover', function(){ $('div').removeClass('active'); $(this).addClass('active'); }) 

 .active { box-shadow: 0 0 5px red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>11111</div> <div>22222</div> <div>33333</div> 

Answer 2

You can do it easily using jquery as in this fiddle https://jsfiddle.net/4f1g1yxf/ . You can do it easily using jquery as in fiddle below. The idea is simple; remove the class from activated one first, then add to the new one.

 $(".box").hover(function(){ $(".box.activated").removeClass("activated"); $(this).addClass("activated"); }); 

 .activated { box-shadow: 0 0 5px red; } .box { display: inline-block; margin-right: 30px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> 

Answer 3

Try the next approach:

CSS:

.abc {
    box-shadow: 0 0 5px red; 
}

HTML:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>

JS:

jQuery('*')
    .bind('mouseover', function (event) {
        var o = jQuery(this);
        if (!o.find('.abc').length) {
            o.addClass('abc');
        }
    })
    .bind('mouseout', function () {
        jQuery(this).removeClass('abc');        
    });

PS Instead of '*' put the proper class or element identifier to limit event scope.