$(document).ready(function(){

$(".logo").hover(function(){
        $('.caption',this).animate({opacity:"show"}, "fast");
        },
        function(){
        $('.caption',this).animate({opacity:"hide"}, "slow");
    });

});

If captions were located away from the .logo classed elements within the DOM, then another method could be

$('.caption').get($('.logo').index(this))

replacing

$('.caption',this)

Each caption is then mapped to it’s corresponding logo by it’s indexed position within the DOM.

If there is nothing relational between the DOM positioning of logo and caption (one is throwing them randomly into the DOM anywhere), then I would investigate any type of jQuery mapping methods or methods allowing data attachment to elements. This is beyond my studies of jQuery so far, but anything that could link the logo to it’s caption could be implemented. Including slicing of id attribute values, which the original poster was wanting to avoid.

thankyou

.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.

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.
});