DETAILED VERSION

Webpage in question: Any of Facebook's page.

Webpage in question

Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]

Requirement

Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.

Initial problem

Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.

Present problem

How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help

[SCREENSHOTS]

1. this is when the page loads [without applying the border]

2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there

css I am using

* { border: 1px solid transparent !important;} //when page loads

* { border: 1px solid transparent !important;}

.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border

.hover-selected{ border: 1px solid #e42a78 !important;}

.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected

.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;}

The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt

4 Answers
4

box-shadow: 0px 0px 0px 1px #000;

Use box shadow instead border. Box-shadow don't take up space.

div {
width:300px;
height:300px;
background: red;
}

div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}

outline is perfect for this. It works in a very similar way to border but does not effect layout at all.

outline

div:hover {
outline: 1px solid orange;
}

Lorem ipsum sit amet.

how many people like and follow this page

outline

box-shadow

you can use box-sizing property in css. Try below code with and without box-sizing property

I would start from something like this and move from there:

*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}


Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)

EDIT

I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:

a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}


https://www.facebook.com/MercedesBenzPolska/

<div>

<img>

<p>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.