[jQuery] Re: image rollover

[mkmanning]

You can take a slightly different approach, which might simplify your
markup, css and js. Since you're using absolute positioning, you can
absolutely position your image over your text, then just toggle the
opacity on hover to reveal the text underneath. One advantage with
this approach is you're always 'over' the image, so there's no issue
of which element has focus and thus firing the mouseout. Here's the
markup:

<ul>
         <li class="episode">
                <p>Text to be shown on mouse over</p>
                <img src="/images/image1.jpg"/>
         </li>
        <li class="episode">
                <p>Text to be shown on mouse over</p>
                <img src="/images/image2.jpg"/>
        </li>
</ul>

Here's the CSS (you'll also need to size the LI's width and height to
the image size):
li.episode{
        position:relative;
}
li.episode img{
        position:absolute;
        top:0;
        left:0;
}
li.episode img.trans{
        opacity: .15; /* Standard: FF gt 1.5, Opera, Safari */
        filter: alpha(opacity=15); /* IE lt 8 */
        -ms-filter: "alpha(opacity=15)"; /* IE 8 */
        -khtml-opacity: .15; /* Safari 1.x */
        -moz-opacity: .15; /* FF lt 1.5, Netscape */
}

Here's the js:

$('.episode img').hover(
        function(){
                $(this).addClass('trans');
        },
        function(){
                $(this).removeClass('trans');
        }
);

Btw, you don't need display:block on a div, it's a block level
element.

On Feb 18, 6:20 am, Leonardo K <leo...@gmail.com> wrote:
> Assign the event to the element li and not the image. Because if you display
> a text over the image, you will lose the event mouseover.
>
> $(document).ready(function() {
>    $("li.episode").mouseover(function ()  {
>       $(this).addClass("background");
>       $('div.details').addClass("show");
>    });
>    $("li.episode").mouseout(function ()  {
>       $(this).removeClass("background");
>       $('.details').removeClass("show");
>    });
>
> });