Hướng dẫn css events - sự kiện css

Đã đăng vào thg 11 12, 2018 2:24 SA 2 phút đọc 2 phút đọc

*Chắc hắn mọi người người đã từng mong muốn làm thế nào để xử lý sự kiện hover của phần tử con nhưng nó nhưng thay vì thay đổi thuộc tính của bản thân nó ta lại muốn thay đổi phần tử cha hay các phàn tử ngang hàng của nó.

giả sửa ta có đoạn mà html:*

  
  
Child one
  
Child two
  
Child three
  
Child four
  
Child five
  
Child six

Yêu cầu 1

Bài toán sẽ dễ dàng nếu như khi hover vào bất kì phần tử li nào thì background của ul thay đổi, nhưng bây giờ ta chỉ muốn duy nhất khi hover vào phần tử thứ 3 thì background của ul mới thay đổi.

• Sử dụng pointer-events Thuộc tính pointer-events của CSS hạn chế con trỏ chuột:
  • click chuột vào bất kỳ đối tượng nào
  • không hiển thị icon mặc định (tùy thuộc vào trình duyệt)
  • sự kiện liên quan đến CSS hover
  • không cho phép hàm JavaScript click (onlick) chạy

Tài liệu về pointer-events

ở ul ta thêm thuộc tính:

ul {
  pointer-events: none;
}

ở phần tử thứ 3 ta thêm thuộc tính:

.three {
  pointer-events: auto;
}

ở đây ta chỉ cần thêm huộc tính hover ở phần tử ul nữa là được:

ul:hover{
  background: red;
}

Link ví dụ Codepend

nhưng nếu ta sử dụng pointer-events:

   
Child

Ta sẽ giữ nguyện được đoạn mà html ban đầu:

• Theo cách thông thường ta sẽ thêm một thẻ html ngang hang với phần thử child:

    
Child
    
Child

và style cho nó:

.parent { width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }

'child {width: 200px; height:200px; position: relative; z-index: 1000; }

.child:hover { background-color: blue; }

.overwrite {
  position: absolute;
  top: 0; 
  left: 0; 
  z-index: 999;
  width: inherit;
  display: none;
  ...
}

.child:hover ~ .overwrite { display: block; }

Link ví dụ Codepend

nhưng nếu ta sử dụng pointer-events:

Ta sẽ giữ nguyện được đoạn mà html ban đầu:

    
Child

* {
  box-sizing:border-box;
}
.container {
  width: 500px;
  margin: auto;
  font-weight: bold;
}
ul {
  list-style-type: none;
}
body {
  font-family: Verdana,sans-serif;
}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #CC0000 ;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: auto;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13%;
    color: #666;
    text-align: center;
}

.days {
    margin: auto;
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #CC0000;
    color: white !important
}

Ta thấy việc sử dụng pointer-events dễ dàng và tối ưu hơn, điểm trừ duy nhất của thuộc tính này là một số trình duyệt thấp không hỗ trợ.

Tài liệu tham khảo:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://medium.com/@erinannette/css-pointer-events-simple-clever-hovers-with-just-a-few-lines-of-code-d44a14a4e06f

All rights reserved