What is the best way to add hover effect using html/js/css in any page builder editor without disturbing its view? : <p>I'm working in one page builder web application which is having page editor where application user can create their web page. In editor, all required components are available in form of widget which user can drag/drop into editor area. Please see attachment for more details.</p>

<p><a href="https://i.stack.imgur.com/943hC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/943hC.png" alt="enter image description here"></a></p>

<p>Here in editor, there is facility to edit any previously added components too. And this is achieved by highlighting hovered component. It happens one at a time so overall logic is been written in js for adding/removing hover css on focused component. Border css properties works perfect but the only issue with it is "it takes space". Whereas my client's basic requirement is that editor view should be exactly like page preview. When I allow border to take space in turn it disturb my actual page GUI which should match my preview. </p>

<p>Due to above reason I moved to outline, outline does not take any space but having another issue, it behave different in Firefox and other browsers. Along with this height lighted area I have setting icons too, which gets setup by subtracting margin, so now in this case outline area gets out of my "setting icon set" in firefox. Not only this icon set but anything been set using -(minus)margin is disturbing.</p>

<p>So basically either I need alternative solution to whole scenario or I need to resolve outline behaviour in firefox for -margin.</p>

<p>Let me know if somebody gone through such condition and having some alternative solution which works in all major browsers.</p>
