In certain website structures, hovering on and selecting the desired element may be harder than on others. Sometimes traversing the html tree up/down may result in very large Sniffie tables, which is not what we want. A typical case is, for example, when you have 60 product cards on the page but the hovering number counter in the sniff mode shows 1500 elements.

To counter this, Sniffie v0.7.0.6 will introduce a new advanced feature called refining mode, where it’s possible to use CSS / XPath selectors to build you Sniffie table. In the mean time, here’s how you can easily make sure you are hovering on the right element!

This is an advanced tutorial and some knowledge of using your browser inspector is required. Here’s a good tutorial for Google Chrome and here’s one for Firefox. If you use Opera, you should read this.

You should also understand how to run inline JavaScript, if you don’t like to edit CSS classes directly.

How to make sure you hover on the correct element on a website

  1. Open your browser’s web inspector.
  2. Use the inspect tool to hover on a product card. Click that product card.
  3. Look at the CSS rules for the product card classes. You need to add some padding to make hovering a bit easies.
  4. Under the product card CSS class rules, add a new formatting rule
    padding:100px;
  5. Your product cards have now 100px of extra padding you can hover on 🙂
  6. When you are finished with extracting the data, you can just reload the page or remove the rule from the web inspector to return the website look and feel back to normal again.

How to make sure you hover on the correct element (the JavaScript way)

  1. Open your browser’s web inspector.
  2. Use the inspect tool to hover on a product card. Click that product card.
  3. Take a note of the product card class. Copy the class.
  4. Open your browser’s web console. It’s in the same tab as the page inspector.
  5. Paste the following code to the console. Change the example-class to the class your product cards have:
    var list = document.getElementsByClassName("example-class");
    for (var i = 0;i<list.length;i++){
     list[i].style.padding = "100px";
    }
  6. Your product cards have now 100px of extra padding you can hover on 🙂
  7. If your product name doesn’t contain a class name, you can change get the element by tag name. Below is an example base on div elements.
    var list = document.getElementsByTagName("div");
    for (var i = 0;i<list.length;i++){ 
      list[i].style.padding = "100px";
    }
  8. You’re good to go!

Special case if your hovered element is a table row

HTML table rows may sometimes not follow padding rules with their display property. Just add another CSS rule for display property for the product card to make sure you get the padding visible, i.e.

display:block;