"Kiểm tra" một phần tử di chuột?

Lưu ý: Tôi đã đọc các chủ đề tương tự, nhưng không hoàn toàn là vấn đề của tôi - tôi có thể nhấp chuột phải vào nó, nó chỉ sau đó biến mất.

Tôi thấy "Kiểm tra phần tử" là một công cụ vô giá trong Chrome, tuy nhiên, bước đột phá mới nhất của tôi khi tôi tìm hiểu các cách phù hợp mà nhiều người trong số các bạn đã có đã thấy tôi tạo menu phụ cho một phần tử trên thanh điều hướng của tôi, nó sẽ bật lên bên dưới khi di chuột qua mục mẹ.

Cửa sổ bật lên (hoặc xuống) không hoàn toàn theo kiểu tôi muốn, vì vậy tôi nhấp chuột phải> kiểm tra phần tử để xem chính xác những gì đến từ đâu và hiểu rõ hơn về cách đạt được hiệu ứng mong muốn của tôi.

Tuy nhiên, ngay sau khi tôi di chuyển chuột ra khỏi menu, nó đã biến mất.

Vì vậy, tôi không thể chọn các phần tử khác nhau trong ngăn kiểm tra và xem khu vực nào được đánh dấu cùng một lúc.

Có cách nào để giải quyết vấn đề này mà không cần thay đổi menu để menu vẫn "bật lên" sau khi được kích hoạt không?

Nếu hoverhiệu ứng được đưa ra với CSSthì có, tôi thường sử dụng hai tùy chọn để có được điều này:

Một, để seenhững hover effectkhi chuột rời hover area:
Mở thanh tra trong cửa sổ neo đậu và tăng độ rộng cho đến khi tầm với của bạn HTML element, sau đó nhấp chuột phải và popup menu phải trên vùng thanh tra ... sau đó khi bạn di chuyển chuột lên quan điểm thanh tra , cáchover effect tiếp tục được kích hoạt trong tài liệu.

Hai, để keepcác hover effectngay cả khi chuột không phải là qua HTML element, mở thanh tra, đi đến Styles TABvà nhấp vào biểu tượng trên bên phải mà nói Toggle Element State... (hình chữ nhật chấm với một mũi tên) Ở đó bạn có thể tự kích hoạt Hover Event(trong số những người khác) với đã cung cấp hộp kiểm.

Nếu nó không rõ ràng chút nào, hãy cho tôi biết và tôi có thể thêm một vài ảnh chụp màn hình. Đã chỉnh sửa : đã thêm ảnh chụp màn hình.

Và cuối cùng và như tôi đã nói lúc đầu, tôi chỉ có thể làm điều này nếu hoverthiết lập được đặt vớiCSS:HOVER ... khi bạn kiểm soát hover statevớijQuery.onMouseOver ví dụ, chỉ hoạt động (đôi khi), phương pháp Một.

Hy vọng nó giúp.

Nếu di chuột được kích hoạt bởi JS, chỉ cần tạm dừng thực thi tập lệnh qua bàn phím. Đây là một nhiều cách đơn giản hơn của đông DOM hơn câu trả lời khác đề nghị.

Đây là cách bạn thực hiện trong Chrome. Tôi chắc chắn rằng Firefox có một thủ tục tương đương:

1. Mở Công cụ dành cho nhà phát triển và chuyển đến Nguồn.

2. Lưu ý phím tắt để tạm dừng thực thi tập lệnh— F8.

   

3. Tương tác với giao diện người dùng để phần tử xuất hiện.

4. Đánh F8 .
5. Bây giờ bạn có thể di chuyển chuột xung quanh, kiểm tra DOM, bất cứ điều gì. Phần tử sẽ ở đó.

Điều hiệu quả với tôi là chọn một thẻ cụ thể mà tôi muốn kiểm tra và thực hiện việc này:

Sau khi thực hiện các bước trên, thông thường tôi sẽ chọn lại thẻ đó, sau đó menu thả xuống sẽ tự động giữ nguyên trạng thái ngay cả khi tôi di chuột đến những nơi khác như Kiểm tra phần tử, v.v.

Bạn chỉ có thể làm mới trình duyệt khi thực hiện kiểm tra các phần tử menu thả xuống để trở lại trạng thái bình thường.

Hi vọng điêu nay co ich. :)

Bạn cũng có thể thực hiện việc này trong bảng điều khiển javascript:

$('#foo').trigger('mouseover');

An sẽ "đóng băng" phần tử ở trạng thái "di chuột".

Đây là cách tôi thực hiện mà không có thay đổi CSS hoặc JS tạm dừng trong Chrome (Tôi đang sử dụng máy Mac và không có PC phía trước nếu bạn đang chạy trên Win):

1. mở bảng điều khiển dành cho nhà phát triển của bạn.
2. chưa bật công cụ kiểm tra khi di chuột mà thay vào đó, hãy mở menu phụ bạn muốn bằng cách di chuột qua nó.
3. nhấn Command+ Shift+ C(Mac) hoặc Ctrl+ Shift+ C(Win / Linux)

bây giờ công cụ kiểm tra di chuột sẽ áp dụng cho các phần tử bạn đã mở trong điều hướng phụ của mình.

Không chắc liệu nó có xuất hiện trong các bản sửa đổi trình duyệt trước đây hay không, nhưng tôi vừa tìm ra phương pháp cực kỳ đơn giản này.

Mở trình kiểm tra trong chrome hoặc Firefox, nhấp chuột phải vào phần tử bạn quan tâm và chọn tùy chọn thích hợp (trong trường hợp này là: di chuột). Điều này sẽ kích hoạt CSS được liên kết.

Ảnh chụp màn hình từ Firefox 55 và chromium 61.

Công cụ tuyệt vời!

Cảm ơn gmo vì lời khuyên đó. Tôi không biết về những cài đặt thuộc tính đó rất hữu ích.

Như một sửa đổi nhỏ cho từ ngữ, tôi sẽ giải thích quá trình đó như sau:

• Nhấp chuột phải vào phần tử bạn muốn tạo kiểu

  • Mở công cụ 'Kiểm tra'

  • Ở phía bên phải, điều hướng đến tab Kiểu nhỏ

  • Đã tìm thấy nội dung biểu định kiểu CSS ở trên

  • Chọn tùy chọn .hov - Điều này sẽ cung cấp cho bạn tất cả các cài đặt có sẵn cho phần tử HTML đã chọn

  • Nhấp và Thay đổi tất cả các tùy chọn để không hoạt động

  • Bây giờ Chọn trạng thái mà bạn muốn tinh chỉnh - Khi kích hoạt bất kỳ trạng thái nào trong số này, Biểu định kiểu của bạn sẽ chuyển bạn trực tiếp đến các cài đặt đó:

Kiểu - Bộ lọc tinh chỉnh - Yếu tố tương tác

Thông tin này là một cứu cánh cho tôi, không thể tin được là tôi vừa được nghe về nó!

thay đổi CSS để thuộc tính ẩn menu không được áp dụng trong khi bạn làm việc trên đó là điều tôi làm.

Tôi cần phải làm điều này, nhưng phần tử tôi đang cố gắng kiểm tra đã được thêm và xóa động dựa trên trạng thái di chuột của phần tử khác. Giải pháp của tôi tương tự như giải pháp này , nhưng điều đó không hiệu quả với tôi.

Vì vậy, đây là những gì tôi đã làm:

1. Thêm tập lệnh đơn giản để vào chế độ trình gỡ lỗi dựa trên mouseoverphần tử kích hoạt sự kiện di chuột mà bạn lo ngại.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Sau đó, với bảng điều khiển dành cho nhà phát triển mở trong Chrome, hãy di chuột qua phần tử của bạn và bạn sẽ vào chế độ gỡ lỗi. Điều hướng đến phần nguồn của các công cụ dành cho nhà phát triển và nhấp vào nút "Tiếp tục thực thi tập lệnh" (nút giống như phát màu xanh lam bên dưới).

Khi bạn làm điều đó, DOM của bạn sẽ bị tạm dừng ở trạng thái di chuột và bạn có thể sử dụng trình kiểm tra phần tử để kiểm tra tất cả các phần tử khi chúng tồn tại ở trạng thái đó.