CODEWITHSUNDEEP
javascriptcss
Oz6848
Oz6848

Reputation: 329

How to set outline without using CSS outline property?

I want to set outline of mouseovered element with Javascript and CSS.

In chrome, CSS outline property works well but not in Internet Explorer(I use IE9).

I tested CSS border property but it decrease width of actual content.

My purpose is setting outline without CSS outline property and content's area isn't changed.

The solution should support IE 7~9 and if also IE6 it's the best.

Upvotes: 1

Views: 339

Answers (2)

Widor
Widor

Reputation: 13275

I tested CSS border property but it decrease width of actual content.

Yes, you'd have to adjust the rest of your layout to account for the border of x pixels that you introduce - it will take up space from somewhere, it's up to you to set appropriate dimensions, margins and padding to compensate.

Upvotes: 0

Tom Abraham
Tom Abraham

Reputation: 390

Wrap the element in a <div> with a transparent border. Color the border on mouseover.

You can add the transparent border to the element itself (and color on mouseover) if you don't mind the content width reducing by a constant amount i.e. the content width won't change on mouseover.

Upvotes: 1

Related Questions