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

【问题标题】：How To select a specific Div from its Class with JS如何使用 JS 从其类中选择特定的 Div
【发布时间】：2014-09-19 11:35:35
【问题描述】：

假设这是我的 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;

 }

它有效，但问题是它一次显示所有标题！我怎样才能实现它只显示这个“位于”我悬停的 .picture_holder_thumb 中的“.title”？

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

【问题讨论】：

标签： javascript php jquery html css

【解决方案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');
 });

【讨论】：

将是最好的解决方案。
是的！谢谢你！有用！但是 .title 并没有真正粘在光标上（我希望它像一个工具提示）。我必须使用 CSS 还是在 JS 代码中进行管理？
@CyrillKuhlmann 您可以通过脚本处理它。需要根据一些数学计算进行一些调整..
好的，所以我最好在一个新问题中问它？
@CyrillKuhlmann 是的，你是对的.. 如果我们继续在这里讨论这个问题，那么这会污染这篇文章，这会让未来的访问者无法使用这篇文章..

【解决方案2】：

试试这个 -

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

【讨论】：