如图:

代码:

html

<ul class="price-brand-right">
  @foreach (Brand item in ViewBag.Brand)
  {
    <li class="li-brand" style="cursor:pointer;">@item.name<input type="hidden" value="@item.brandid"></li>
  }
</ul>

js

//品牌鼠标移动
$(".li-brand").hover(function () {
  var b = $(this).css("fontWeight");
  if (b.indexOf("bold") != -1) {
    return false;
  }
  $(this).css({ "color": "red", "text-decoration": "underline" });
}, function () {
  var b = $(this).css("fontWeight");
  if (b.indexOf("bold") != -1) {
    return false;
  }
  $(this).css({ "color": "#666", "text-decoration": "none" });
}); //品牌点击
$(".li-brand").click(function () {
  $(this).css({ "color": "green", "fontWeight": "bold", "text-decoration": "none" });
  $(this).prevAll("li").css({ "color": "#666", "fontWeight": "normal" });
  $(this).nextAll("li").css({ "color": "#666", "fontWeight": "normal" });
});

JQuery------实现鼠标点击和滑动不同效果的更多相关文章

  1. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  2. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  3. (二)Three光线检测-实现摄像机向鼠标点击位置滑动动画

    (二)Three.js光线检测 摘要:使用three.js中的光线检测 Raycaster() ,实现一下效果: 通过点击处的坐标,修改摄像机位置,实现摄像机由远及近的过渡动态效果(由远景到近景) 1 ...

  4. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  5. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  6. 【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置

    问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上. 办法:给Slider控件设置属性IsMoveToPointEnabled="True"即 ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  9. jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

随机推荐

  1. 【微信支付】公众号、商户基础配置和流程(包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等)

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  2. python --特殊方法与多范式

    转自:http://www.cnblogs.com/vamei/archive/2012/11/19/2772441.html Python一切皆对象,但同时,Python还是一个多范式语言(mult ...

  3. 调整弹出对话框在ASP.NET应用程序的大小

    调整弹出对话框在ASP.NET应用程序的大小 #region 调整弹出对话框在ASP.NET应用程序的大小    protected void PopupWindowControl_Customize ...

  4. C# Directory类的操作

    Directory类位于System.IO 命名空间.Directory类提供了在目录和子目录中进行创建移动和列举操作的静态方法.此外,你还可以访问和操作各种各样的目录属性,例如创建或最后一次修改时间 ...

  5. iOS中Storyboard使用要点记录

    摘要: Storyboard的使用与原本单个xib文件的使用还是有些不同的,于习惯上会有些出入.在这里记下遇到的要点. 1.将第一个ViewController用设置成NavigationContro ...

  6. shell脚本 批量转换目录下文件编码

    发布:JB01   来源:脚本学堂     [大 中 小] 分享一例shell脚本,实现可以批量转换目录下的文件编码,很实用的一个小shell,有需要的朋友参考下.原文地址:http://www.jb ...

  7. 安卓API首页

    http://developer.android.com/reference/packages.html

  8. Struts2 上传下载

    一. 1.文件上传是web应用经常用到的一个知识.原理是,通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数 据以二进制编码的方式提交,在接收此请求的Se ...

  9. libjpeg.a exists or that its path is correct

    Android NDK: ERROR:/cygdrive/e/cocos2d-x/code/cocos2d-2.1rc0-x-2.1.3/HelloTest1/proj.android/../../c ...

  10. nyoj 15 括号匹配(2)

    括号匹配(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:6 描述 给你一个字符串,里面只包含"(",")","[" ...