zoukankan      html  css  js  c++  java
  • 解决click与hover(mouseover)的冲突问题

    主要应用到一个知识点:$(selector).data('name','value');

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
          .content{
              100px;
              height:100px;
              border:2px solid #999;
              border-radius:10px;
           }
           .active{
            background:red;
           }
           .onbackground{
            background:green;
           }
    </style>
    
    
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body >
    <div class="content">
         <button class="seemore">查看</button>
      </div>
        <script>
           
          $('.content').mouseover(function(){
               
               var a = $(".content").data("flag");
                 console.log(a);
                 if(a==1){
                  
                 }else{
                   $(this).addClass("onbackground");
                 }
               
            });
    
    
            $(".content").mouseout(function(){
    
    
                  $(this).removeClass("onbackground");
              })
            
            $(".seemore").click(function(){
               $(this).parent().addClass("active");
               $(".content").data("flag","1");
            })
    
    
            
              
            
        </script>
        
    
    
    </body>
    </html>
  • 相关阅读:
    flume复习(二)
    初级3
    桶排序、计数排序、基数排序的介绍
    Hive编程指南读书笔记(1):
    重写、重载、封装、继承和多态
    Int与Integer的区别
    collect_list/collect_set(列转行)
    Group BY
    H指数
    数据倾斜2
  • 原文地址:https://www.cnblogs.com/smedas/p/12614263.html
Copyright © 2011-2022 走看看