I overlaid one div on top of another to create a border effect.
Check out this example:
However, I am facing an issue: when I hover the mouse over the image, only the div with the border gets focus (for instance, for right-clicking and saving the image), but the div itself is empty as it's solely used for the border. How can I ignore the center part of the div?
I opted for using a div because I needed to position the border over the image or other content, and achieving the same result with the original border would leave a white space between the border and the image.
In this jsfiddle demo, the dimensions are not accurate. (I added the border using JS code)
img = $('<div style="position:absolute; width: ' + ($(this) .outerWidth(true) +
leagueBorders[templeague].width) + 'px; height: ' + ($(this) .outerHeight(true) +
leagueBorders[templeague].height) + 'px; max-width: none; top: '+
($(this).position().top + leagueBorders[templeague].top) +'px; left: '+
($(this).position().left + leagueBorders[templeague].left) +'px;"
class="'+leagueBorders[templeague].classe+'"></div>');`
As you can see on the site, if you try to right-click the image, you will encounter the menu for an empty space instead of the image options.
Furthermore, if I include text with a scroll bar (rather than an image), the scrollbar becomes unusable.