Thanks guys. I'll test these out. Will post the results soon.
On Feb 18, 11:43 am, mkmanning <michaell...@gmail.com> wrote:
> 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");
> > });
>
> > });- Hide quoted text -
>
> - Show quoted text -
