Tiện ích mở rộng của Google Chrome: đánh dấu div mà chuột đang di chuột qua

Question

Tôi mới sử dụng tiện ích mở rộng của google chrome và đang cố viết một tiện ích đánh dấu div trong trường hợp chuột ở trên nó (Hover). Trong trường hợp có một div bên trong div khác, tôi chỉ muốn làm nổi bật div bên trong.

tôi đã có một số các mẫu làm việc nhưng không chắc chắn làm thế nào để nắm bắt được sự kiện di chuột, Cảm ơn trước sự giúp đỡ nào,

Hãy hạnh phúc và tận hưởng cuộc sống.

Answer 1

Trong HTML, mọi sự kiện chuột đều có quyền truy cập vào phần tử cơ bản. Bạn có thể làm điều đó dễ dàng với JavaScript và có một tính năng đẹp trong HTML5 được gọi là classList (nhờ Erik từ Chromium) cho phép bạn thêm và xóa lớp học khỏi DOM dễ dàng.

Trước hết, bạn có thể đạt được điều này với Content Scripts của Google Chrome. Thuật toán khá đơn giản, bạn giữ một con trỏ đến DOM được truy cập lần cuối và bạn chỉ cần thêm/xóa lớp khi bạn truy cập phần tử DIV khác.

Trong số manifest.json Chúng tôi sẽ xác định việc chèn CSS và JS vào mọi trang chúng tôi thấy.

... 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "css": ["core.css"], 
     "js": ["core.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ] 
    ... 
    ... 

Bây giờ cho phép nhìn vào chúng tôi core.js, tôi đã bao gồm một số ý kiến ​​để giải thích những gì đang xảy ra:

// Unique ID for the className. 
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited'; 

// Previous dom, that we want to track, so we can remove the previous styling. 
var prevDOM = null; 

// Mouse listener for any move event on the current document. 
document.addEventListener('mousemove', function (e) { 
    var srcElement = e.srcElement; 

    // Lets check if our underlying element is a DIV. 
    if (srcElement.nodeName == 'DIV') { 

    // For NPE checking, we check safely. We need to remove the class name 
    // Since we will be styling the new one after. 
    if (prevDOM != null) { 
     prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME); 
    } 

    // Add a visited class name to the element. So we can style it. 
    srcElement.classList.add(MOUSE_VISITED_CLASSNAME); 

    // The current element is now the previous. So we can remove the class 
    // during the next iteration. 
    prevDOM = srcElement; 
    } 
}, false); 

Bây giờ, cho phép xem xét đơn giản core.css cho các kiểu:

.crx_mouse_visited { 
    background-color: #bcd5eb !important; 
    outline: 1px solid #5166bb !important; 
} 

Thats it, bạn sẽ nhận thấy rằng tất cả div của bạn sẽ có trạng thái "lơ lửng", tương tự trên hap bút khi bạn truy cập trình kiểm tra trình duyệt của bạn khi kiểm tra các yếu tố.

Answer 2

@pdknsk Những gì bạn có thể làm để thiết lập này cho mỗi phần tử được, cho sự kiện onload của cơ thể, chạy mã này:

bod= document.body; 
walker = document.createTreeWalker(bod,NodeFilter.SHOW_ELEMENT,null,false); 
while (walker.nextNode()){ 
    walker.currentNode.addEventListener("mouseover",on,false); 
    walker.currentNode.addEventListener("mouseout",off,false); 
} 

và sửa đổi và tắt như thế này:

on=function(elem){ oldBG = this.style.backgroundColor; 
        this.style.backgroundColor='#123456'; 
        this.addEventListener("mouseout",function(){this.style.backgroundColor= oldBG},false); 
} 

Điều cần lưu ý là, điều này sẽ chỉ hoạt động nếu kiểu được đặt bằng cách sử dụng đối tượng element.style và để làm cho nó mạnh mẽ hơn, bạn sẽ cần có được element.style.cssText và quá trình (sử dụng regex) và sửa đổi nó.

Tất cả trong tất cả, Câu trả lời của Mohamed Mansour là cách tốt nhất để đạt được điều này.