Remove attribute on mouseover and add back on mouseout

Question

I have following code, and what I am doing here is adding an inline style for background-color, and its working fine as well, but what my requirement is, when I mouseover on the div containerLink it should remove the inline style which I have added using the following and when mouseout, it should add that style attribute back with the value it has previously.

Can somebody suggest how to add the hover functionality?

$(window).on("load resize scroll",function(){
    $(".containerLink").each{(function(index, eles){
        var alphaVal = $(elem).attr('backgroundOpacity');
        if(alphaVal && alphaVal != '100')
        $(elem).css('background-color','');
        $(elem).css('background-color', funtion(index, value){
            if (value === 'rgba(0,0,0,0)'){
                return value;
            }
            if(value.match(/\d+, \d+, \d+/g) != null){
                var RGBValue = value.match(/\d+, \d+, \d+/g)[1];
                return "rgba(" + RGBValue + "," + alphaVal + ")";
            }
        });
    }
    )}
});

Why not a simple CSS rule: `.containerLink:hover { ... }` O.o — Andreas, Mar 10 '18 at 14:04
I wish I could do that, but I cannot as this is something I am looking to handle within JS only. — Sanjeev Kumar, Mar 10 '18 at 14:05

score 1 · Answer 1 · answered Mar 10 '18 at 14:32

Try this :

$(".containerLink" ).each(function(){
    $(this).mouseout(function() {
        $(this).css("background-color", "#000"); 
        // OR
        $(this).attr("style","");
        // OR WHAT YOU WANT
    })
    .mouseover(function() {
        $(this).css("background-color", "#fff"); // mouse in code gose here....
    });
});

suchislife · Accepted Answer · 2018-03-10T14:45:22.620

Here's a working example with information from:

JQuery .hover() Event

$( "#target_container" ).hover(

// Hover IN
function() {
$( this ).text("hover IN");
$( this ).css('background-color', 'lightblue');

// Hover OUT
}, function() {
$( this ).text("hover OUT");
$( this ).css('background-color', 'yellow');

}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target_container" style="width:100px; height: 100px; background-color: yellow;">Ready to hover?</div>

Remove attribute on mouseover and add back on mouseout

2 Answers2