高亮显示JQ

用jQuery完成照片高亮显现

实例—照片

方法一:

获取每一个包裹img图片的div(.img),用this完成

var $img = $(document.getElementsByClassName("img"));

$img.mousemove(function(){

    $(this).css("opacity","1");

    $(this).siblings(".img").css("opacity","0.3");

})

$(".box").mouseout(function(){

    $(".box>.img").css("opacity","1");

})

实例—照片

方法二:

使用jQuery中的hover属性完成

$(".box").mouseover(function(event){

    $(".box>.img").css("opacity","0.3");

    $(".box>.img:hover").css("opacity","1");

})

$(".box").mouseout(function(){

    $(".box>.img").css("opacity","1");

})

实例—照片
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,054评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 找到fullcalendar.js, 找到代码为 isRTL:false,这句话 输入以下几句 monthName...
    迷你小小白阅读 1,735评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 【关键词】努力 9.25那天早晨刚接到谢老师说要让我们培训演讲,谁愿意?当时的心态想都没想直接举手,因为有句话叫机...
    时倾l阅读 258评论 0 0