Helpex - Trao đổi & giúp đỡ Đăng nhập
104

Tôi đang cố gắng vô hiệu hóa một liên kết cụ thể và áp dụng kiểu con trỏ nhưng lệnh CSS này cursor: text;sẽ không có hiệu lực. Con trỏ luôn được mặc định. Tôi đang sử dụng phiên bản Firefox mới nhất.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;
104 hữu ích 1 bình luận 69k xem chia sẻ
136

Việc sử dụng pointer-events: nonesẽ vô hiệu hóa tất cả các tương tác của chuột với phần tử đó. Nếu bạn muốn thay đổi thuộc cursortính, bạn sẽ phải áp dụng các thay đổi cho phần tử mẹ. Bạn có thể bao bọc liên kết bằng một phần tử và thêm thuộc cursortính vào nó.

Ví dụ ở đây

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

Tuy nhiên, có một số điểm không nhất quán của trình duyệt. Để làm cho điều này hoạt động trong IE11, có vẻ như bạn cần một phần tử giả. Phần tử giả cũng cho phép bạn chọn văn bản trong FF. Thật kỳ lạ, bạn có thể chọn văn bản trong Chrome mà không cần nó.

Ví dụ cập nhật

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}
136 hữu ích 3 bình luận chia sẻ
37

Đã khá lâu kể từ câu hỏi ban đầu, nhưng đây là giải pháp của tôi mà không có bất kỳ phần tử gói nào và con trỏ không có sự kiện con trỏ:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

Ví dụ về CodePen

BIÊN TẬP:

  • Chrome đã bắt đầu thêm tiêu điểm vào nhấp chuột vào các phần tử có thuộc tính tabindex (ngay cả với tabindex = "- 1"). Giải pháp nhanh nhất là đặt thành onfocus="this.blur()"phần tử không tập trung.
  • Bạn cần ngăn phần tử lấy nét nếu không nó có thể được kích hoạt bằng phím enter
37 hữu ích 5 bình luận chia sẻ
13

Bằng cách chỉ định, pointer-events:nonebạn đang tích cực khai báo rằng không có tương tác chuột giữa phần tử và con trỏ. Do đó, nó cũng không thể có con trỏ - nó vô hình đối với tất cả các hành vi của chuột.

Bằng chứng được tìm thấy ở đây .

13 hữu ích 1 bình luận chia sẻ
4

Loại bỏ pointer-events: none !important;. Vô hiệu hóa liên kết bằng JavaScript:

anchorElement.onclick = function(){
  return false;
}

Nếu bạn không biết JavaScript anchorElementlà chính Node hay Element. Cách phổ biến nhất để có được Phần tử là sử dụng idthuộc tính HTML . Giả sử chúng ta có:

<a id='whatever' href='#'>Text Here</a>

Mã của bạn có thể là:

document.getElementById('whatever').onclick = function(){
  return false;
}

Có một số cách khác để có được Nút.

4 hữu ích 1 bình luận chia sẻ
0

Trường hợp sử dụng của tôi là một phần tử có thể kéo không được có bất kỳ sự kiện con trỏ nào cũng như bất kỳ phần tử mẹ nào có sự kiện con trỏ.

Tôi đã giải quyết nó bằng cách áp dụng một cách có điều kiện kiểu toàn cục chỉ buộc một con trỏ cố định trong khi kéo. (Tôi đang sử dụng React và các thành phần được tạo kiểu, nhưng logic tương tự có thể được áp dụng trên vani js).

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}
0 hữu ích 0 bình luận chia sẻ
0

bạn có thể tạo một div khác và định vị nó chính xác trên div cuối cùng của bạn và tạo một css như sau:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}
0 hữu ích 0 bình luận chia sẻ
0

Thay vì trình bao bọc, điều này cũng có thể được thực hiện với CSS thuần túy từ bên trong. (Tôi sử dụng cái này với thành phần material web, vì vậy mã phức tạp hơn một chút.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}
<button>
    <svg .../>
</button>

Tôi cũng đã cố gắng ::before::aftervới button:disabledtrực tiếp, nhưng chỉ là không thể làm cho nó xảy ra ...

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading