Question

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

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

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

Answer 1

试试这个：

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

Answer 2

以下是工作示例，其中包含以下信息：

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 个答案: