Question

让我们说这是我的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>

这会创建一个可视缩略图索引，如下所示：

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

我有一个JS，根据游标位置显示每个缩略图的标题：

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>

这是CSS：

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

 }

它有效，但问题在于它会立即显示所有标题！我怎样才能实现它只显示这个＆＃34; .title＆＃34; ＆＃34;在于＆＃34;我正在徘徊的.picture_holder_thumb？

这可能吗？不幸的是，由于CMS结构，我无法将类更改为ID ...

Answer 1

使用this作为选择器的context。

尝试，

$(".title", this)

而不是

$(".title")

完整代码将是，

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

 $(".picture_holder_thumb").mouseout(function(){
   $(".title", this).fadeOut('slow');
 });

Answer 2

试试这个 -

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

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

2 个答案: