JQUERY, CSS, When moused over an LI show a SPAN tag inside?

Question

Given the following:

ul li .main .meta {opacity:0;}

<ul>
<li>  <span class="main">TITLE</span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 2 </span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 3</span> <span class="meta">meta</span>  </li>
etc... long list...
</ul>

What kind of JQUERY magic can I do so that whenever a user mouses over AnyWhere in the LI, the SPAN with the class=META, changes to Opacity:1, and when the user moves their mouse off that LI that LI's meta goes back to Opacity:0, and the new LI's meta goes to Opacity 1. etc....

Thanks!

Answer 1

$('ul li.main').mouseover(function(evt){ $(this).find('span.meta').show(); });

I think...

Answer 2

There are a couple of issues here. The simplest implementation is:

$("li").hover(function() {
  $(this).find("span.meta").stop().fadeIn();
}, function() {
  $(this).find("span.meta").stop().fadeOut();
});

which will sort of work. The problem is that spans are inline elements and fadeIn() will change it to a block-level element.

Note: putting stop() in there is a good habit to get into otherwise you can get unintended effects if you quickly fire off several animations on the same target.

You can do this with classes too:

$("li").hover(function() {
  $(this).find("span.meta").removeClass("hidden");
}, function() {
  $(this).find("span.meta").addClass("hidden");
});

with:

span.hidden { display: none; }

but you lose the fade in and fade out effects this way. It does solve the display: block problem however.

You could alternatively animate() the opacity but opacity isn't really supported on IE. See opacity:

IE compatibility note

If you want opacity to work in all IE versions, the order should be:

.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
  filter: alpha(opacity=50);                    // second!
}

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

This code looks something like this:

$("li").hover(function() {
  $(this).find("span.meta").stop().animate({opacity: 0.0});
}, function() {
  $(this).find("span.meta").stop().animate({opacity: 1.0});
});

One question you have to answer is: do you want the "meta" content to not be rendered or just not be visible? There's a difference. To not be rendered is like display: none. To not be visible is like opacity: 0 which could potentially confuse the user since the text will still be selectable.

IMHO I think you'd be better off accepting the block nature of the display or to use a tooltip (even a rich tooltip) instead.

Answer 3

Like this:

$('li').hover(
    function() { $('span.meta', this).show(); },
    function() { $('span.meta', this).hide(); }
});

By the way, the correct way to hide an element in CSS is to use either visibility: hidden (if you want it to occupy space) or display:none (if you don't want it to occupy space)

Answer 4

The simplest implementation is the purely CSS one;

ul li .meta {opacity:0;}
ul li:hover .meta {opacity:1;}

It won't do any fade in/out effects but it achieves your goal. Using display or visibility, depending on whether or not you want the text to affect page layout when not visible, may be desirable to opacity from a browser support standpoint.