zoukankan      html  css  js  c++  java
  • jQuery设置点击选中样式,onmouseover和onmouseout事件

    1、点击选中设置样式

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

    2、onmouseover和onmouseout事件

    • img标签
     1 /**
     2  * 鼠标悬浮
     3  * @param id
     4  * @param imgOver
     5  */
     6 function setFootImgOver(id, imgOver) {
     7     $("#footImgLogo" + id).attr('src', imgOver);
     8 }
     9 
    10 /**
    11  * 鼠标移除
    12  * @param id
    13  * @param imgOut
    14  */
    15 function setFootImgOut(id, imgOut) {
    16     $("#footImgLogo" + id).attr('src', imgOut);
    17 }

    • backgroud-image标签
     1 /**
     2  * 悬浮
     3  * @param id
     4  * @param imgOver
     5  */
     6 function proCategoryImgOver(id, imgOver) {
     7     $("#proCategoryImg" + id).css({'background-image': 
     8          'url(' + imgOver + ')'});
     9 }
    10 
    11 /**
    12  * 移除
    13  * @param id
    14  * @param imgOut
    15  */
    16 function proCategoryImgOut(id, imgOut) {
    17     $("#proCategoryImg" + id).css({'background-image':
    18          'url(' + imgOut + ')'});
    19 }

    作者:donleo123
    本文如对您有帮助,还请多推荐下此文,如有错误欢迎指正,相互学习,共同进步。
  • 相关阅读:
    进程(二)
    操作系统简介-计算机历史、进程(一)
    MemCahce For Java
    fiddler:工具栏介绍
    fiddler相关
    HTTP:Cookie
    在eclipse中开发servlet流程
    servlet 开发入门&生命周期
    HTTP响应
    HTTP:请求头信息
  • 原文地址:https://www.cnblogs.com/donleo123/p/14072637.html
Copyright © 2011-2022 走看看