Comments on: Quick Tip: Outline Elements on Hover

By: links for 2010-02-15- This 'N That

links for 2010-02-15- This 'N That — Tue, 16 Feb 2010 00:34:15 +0000

[...] Quick Tip: Outline Elements on Hover (tags: tutorial javascript jquery css) February 16th, 2010 | Posted in Reading « links for 2010-01-28 [...]

By: Lacey

Lacey — Mon, 08 Feb 2010 16:22:15 +0000

Hi, Would it be possible to use what you’ve done here and then also let the user change the colour of the element they select from a widget? kinda like what firebug does but more permanent. Ive been trying to find a example but no luck can you help please :(

thankyou

By: Fre

Fre — Wed, 03 Feb 2010 12:42:16 +0000

I don’t really see the necessity of JQuery for the most part this example? This could just as easily be accomplished using only CSS and the :hover selector (which doesn’t work in IE6, but since outline doesn’t work either it wouldn’t really matter).

.entrytext *:hover {
       outline: 1px solid #c00;
}

The clicked outline would still have to be added with JQuery of course.

And this could be useful in an online code editor, where you want to show the user where an element starts/ends to find bugs more easily. It’s basically the same way CSSEdit2 on Mac works.

By: Thomas

Thomas — Wed, 23 Dec 2009 14:16:44 +0000

What you did here can better be done with CSS and this might even work for those who diabled JS.

By: discount web design

discount web design — Thu, 03 Sep 2009 07:44:53 +0000

Thanks for such excellent post. Really informative blog. Keep the good work here and i wish you all the best and success.

By: jyoseph

jyoseph — Fri, 14 Aug 2009 04:43:11 +0000

I love seeing the progression, how you wrote that first piece of code, slept on it, trimmed it down. Gave it some time, trimmed it down some more. As you said it’s not that the final code you produced is the “best” (depends on the application), but seeing the progression of how you were able to keep fine tuning the code is awesome.

By: Aaron

Aaron — Mon, 10 Aug 2009 06:08:47 +0000

Simply amazing.

Thanks for the article.

Pretty neat :

1. $(document).ready(function() { 2. $('.entrytext') 3. .bind('mouseover mouseout', function(event) { 4. var $tgt = $(event.target); 5. if (!$tgt.closest('.syntax_hilite').length) { 6. $tgt.toggleClass('outline-element'); 7. } 8. }) 9. .click(function(event) { 10. $(event.target).toggleClass('outline-element-clicked'); 11. }); 12. });

By: Anthony Hurst

Anthony Hurst — Mon, 03 Aug 2009 22:30:22 +0000

This is great for debugging CSS issues.

By: Simon

Simon — Thu, 16 Jul 2009 10:22:52 +0000

Thank you, thank you, thank you..

By: MySchizoBuddy

MySchizoBuddy — Mon, 06 Jul 2009 16:12:08 +0000

I have a use for it specially inside a textarea. For eg when entering ASCIIMathML like so
‘y=x^2′ I would like when the mouse cursor or keyboard cursor is inside the backticks(‘) then it should highlight the complete formula and right below it open up a preview of what exactly will y=x^2 be rendered as. Very very handly to type long technical articles with complex equations.

Perhaps you can write a tutorial on that functionality. Use a dictionary as an example. when you hover over complex words it highlights it and show its meaning in a small preview underneath. like this image http://www.lifehacker.com/assets/resources/2006/09/os%20x%20dictionary.png