dp20011
2014-09-19 11:35
浏览 235

如何使用JS从类中选择特定的Div

Let's say this is my html:

<div class="picture_holder_thumb">
<div class="picture"> <a href="…"><img></a></div>
<div class="captioning"><div class="title" display: none; ">TITLE</div></div>
</div>

This creates a visual Index of Thumbnails as can be seen here:

www.cyrill-kuhlmann.de/index.php/projects

I have a JS that shows the title of each thumbnail according to the cursors position:

script type='text/javascript'>
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.pageX; 
 mouseY = e.pageY;
 });  
 $(".picture_holder_thumb").mouseover(function(){
 $(".title").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
 });

 $(".picture_holder_thumb").mouseout(function(){
 $(".title").fadeOut('slow');
 });
 </script>

This is the CSS:

.captioning .title {
    position: relative;
    z-index:1;
    color: #FFF;
    display: none;

 }

And it works, but the problem is that it shows ALL Titles at once! How can I achieve that it only shows this ".title" that "lies in" the .picture_holder_thumb that I am hovering?

Is that possible? Unfortunately I can't change the classes in to ID's because of the CMS structure…

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douxi4114 2014-09-19 11:37
    已采纳

    Use this as the context to the selector.

    Try,

    $(".title", this)
    

    instead of

    $(".title")
    

    Full code would be,

     $(".picture_holder_thumb").mouseover(function(){
       $(".title", this).css({'top':mouseY,'left':mouseX}).fadeIn('slow');
     });
    
     $(".picture_holder_thumb").mouseout(function(){
       $(".title", this).fadeOut('slow');
     });
    
    打赏 评论
  • dongyun8075 2014-09-19 11:38

    try this -

    $(".picture_holder_thumb").mouseover(function(){
        $(this).children(".title").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });
    
    打赏 评论

相关推荐 更多相似问题