删除鼠标悬停属性并重新添加鼠标悬停[重复]答案

【问题标题】：Remove attribute on mouseover and add back on mouseout [duplicate]删除鼠标悬停属性并重新添加鼠标悬停[重复]
【发布时间】：2018-03-10 14:01:48
【问题描述】：

我有以下代码，我在这里所做的是为背景颜色添加内联样式，它也可以正常工作，但我的要求是，当我将鼠标悬停在 div containerLink 上时，它应该删除我使用以下内容添加的内联样式，当鼠标移出时，它应该将该样式属性添加回它之前的值。

有人可以建议如何添加悬停功能吗？

$(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 + ")";
            }
        });
    }
    )}
});

【问题讨论】：

为什么不简单的 CSS 规则：.containerLink:hover { ... }O.o
我希望我能做到这一点，但我不能，因为这是我希望仅在 JS 中处理的事情。

标签： javascript jquery html css

【解决方案1】：

这是一个工作示例，其信息来自：

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>

【讨论】：

【解决方案2】：

试试这个：

$(".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....
    });
});

【讨论】：