CODEWITHSUNDEEP
jquerymouseeventonmouseoutismouseover
Miro
Miro

Reputation: 131

jQuery mouseover mouseout event on a <span> when hover over a div

I am trying to make a title appear and disappear over a thumbnail. This is my title span:

<span class="thumbtitle"><?php the_title(); ?></span>

This is inside an <li> tag with a class of "thumb".

The jQuery i am using is:

<script type='text/javascript'>
$(document).ready(function() {
  //settings
  var opacity = 0, toOpacity = 1, duration = 0;
  //set opacity ASAP and events
  $('.thumbtitle').css('opacity',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );
});
</script>

Now this works perfectly, but it works when i hover over the title... i would like it to trigger when i hover over the thumbnail rather than where the title is positioned, so that when the mouse goes over the thumbnail (anywhere on it) the title appears.

Can someone help me do this? Also, can i give it an animation effect.. so that it gradually appears and disappears, rather than just instantly appear and disappear?

Miro

Upvotes: 1

Views: 4214

Answers (3)

void
void

Reputation: 482

Acording on the title of you question, i suposed that you html looks something like this

This is the thumbnail:
<div class="thumbnail">
    <li class="thumb">
        <span class="thumbtitle">Title<span>
    </li>
</div>

Check this out:

DEMO

$(document).ready(function() {

    // Start with no title visible.
    $('.thumb').hide();

    //settings
    var opacity = 0, toOpacity = 1, duration = 0;
    //set opacity ASAP and events

    $('.thumbnail').hover(function() {
        $(this).children('.thumb').fadeTo(duration , toOpacity );
    }, function() {
        $(this).children('.thumb').fadeTo(duration , opacity );
    });
});

Upvotes: 0

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

If you don't want it show on pageload, set the initial opacity to 0, and set it to 1 when hovered on...

Upvotes: 0

Subhajit
Subhajit

Reputation: 1987

here is the updated one :-

<script type='text/javascript'>
   $(document).ready(function() {
   //settings
   var opacity = 0, toOpacity = 1, duration = 0;
   //set opacity ASAP and events
   $('li.thumb').hover(function() {
      $(this).children('.thumbtitle').fadeTo(duration,toOpacity);
    }, function() {
      $(this).children('.thumbtitle').fadeTo(duration,opacity);
    }
  );
});
</script>

Upvotes: 2

Related Questions