如图:

代码:

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. T-sql 根据日期时间 按年份、月份、天来统计

    看统计结果: 这里利用的是convert函数,这里不得不说一下convert函数 CONVERT() 函数是把日期转换为新数据类型的通用函数. CONVERT() 函数可以用不同的格式显示日期/时间数 ...

  2. string 类简介和例程

    一.标准库string类型 string类型支持长度可变的字符串,C++标准库将负责管理与存储字符相关的内存,以及提供各种有用的操作 ,在VC中直接F1查看 template < class C ...

  3. FPGA管脚分配文件保存方法

    使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment -> Pins,打开F ...

  4. SQLyog之MySQL客户端的下载、安装和使用(企业版)(破解)

    本博文的主要内容有 .SQLyog的下载 .SQLyog的安装 .SQLyog的使用 1.SQLyog_Enterprise的下载 比如,我这里,是放在D:\SoftWare 继续

  5. nodejs Commander 命令行神器简单示例

    gen.js #!/usr/bin/env node var program = require('commander'); program .version('0.0.1') .option('-C ...

  6. 动态时间规整-DTW算法

    作者:桂. 时间:2017-05-31  16:17:29 链接:http://www.cnblogs.com/xingshansi/p/6924911.html 前言 动态时间规整(Dynamic ...

  7. ubuntu16.04安装jekyll 3.3.1

    本次安装的ekyll为最新的3.3.1版本. 一.预备工作,因位jekyll需要很多软件的支持,所以准备工作要做足. Ruby (including development headers, v1.9 ...

  8. location 符号

    元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\(”则匹配“(”.即相当于多种编程语言中都有的“转义 ...

  9. Jackson 时间格式化,时间注解 @JsonFormat 与 @DatetimeFormat 用法、时差问题说明

    @JsonFormat 使用 我们可以有两种用法(我知道的),在对象属性上,或者在属性的 getter 方法上,如下代码所示: 增加到属性上: ... ... /**更新时间 用户可以点击更新,保存最 ...

  10. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...