jQuery设置点击选中样式，onmouseover和onmouseout事件

1、点击选中设置样式

//默认选中第一个
$('.navigation>a:first-child>div').addClass('category-selected');
//选中样式切换
$('.navigation>a>div').click((e => {
    $('.navigation a>div').removeClass('category-selected');
    $(e.target).addClass('category-selected');
}));

 

2、onmouseover和onmouseout事件

• img标签

/**
 * 鼠标悬浮
 * @param id
 * @param imgOver
 */
function setFootImgOver(id, imgOver) {
    $("#footImgLogo" + id).attr('src', imgOver);
}

/**
 * 鼠标移除
 * @param id
 * @param imgOut
 */
function setFootImgOut(id, imgOut) {
    $("#footImgLogo" + id).attr('src', imgOut);
}

 

• backgroud-image标签

/**
 * 悬浮
 * @param id
 * @param imgOver
 */
function proCategoryImgOver(id, imgOver) {
    $("#proCategoryImg" + id).css({'background-image': 
         'url(' + imgOver + ')'});
}

/**
 * 移除
 * @param id
 * @param imgOut
 */
function proCategoryImgOut(id, imgOut) {
    $("#proCategoryImg" + id).css({'background-image':
         'url(' + imgOut + ')'});
}