Question

我有这个jquery函数，在悬停时显示一个段落标记。

问题是我的段落在php while循环中，因此会有更多p标签具有相同的类，因此当我将鼠标悬停在一个上面时，我会看到所有这些文本。

无论如何都要避免这种情况，所以我只看到我实际上正在盘旋的人的文字，即使他们有同一个班级？

<div class="profit" style="height:<?php if($tinyCasePriceProfit >= 100)
    { echo 200;} else{ echo $tinyCasePriceProfit; }?>px; background-color:green; width:20px; border-radius:5px; margin-left:67%; top:31.3%;"></div>


<div class="loss" style="height:<?php if($tinyCasePriceLoss >= 100)
    { echo 200;} else{ echo $tinyCasePriceLoss; }?>px; background-color:red; width:20px; border-radius:5px; margin-left:65%; margin-top:-14px;"></div>
        <p class="lossOfProject" style="display:none; margin-left: 60%;">Tab på dette projekt er: <?php echo $moneyLostOnCase;?> Kr</p>
<p class="profitOfProject" style="display:none; margin-left: 60%;">Tjen på dette projekt er: <?php echo $casePrice;?> Kr</p>

$('.loss').mouseover(function(){
            $('.lossOfProject').fadeIn();
            });

$('.profit').mouseover(function(){
            $('.profitOfProject').fadeIn();
            });

注意html代码是在一个php while循环中，它使段落的更多部分成为一个：）

Answer 1

试试这个：

$('.loss').mouseover(function(){             
         $('.lossOfProject', this).fadeIn();
});

顺便说一下，你需要什么高度？

Answer 2

使用.next()方法记住将上下文与this;

保持一致

您也应该使用mouseenter代替mouseover

$('.loss').mouseenter(function(){             
     $(this).next('.lossOfProject').fadeIn();
});

这是一个演示：

＆＃13;

$(function() {
  $('.loss').on('mouseenter', function() {
    $('.lossOfProject').not( $(this).next() ).hide();
    $(this).next('.lossOfProject').fadeIn();
  });
});

＆＃13;

.profitOfProject, .lossOfProject {
  display:none;
}
.loss {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="loss">
  LOSS ... click here
</div>
<p class="lossOfProject">Profit 1</p>
<p class="profitOfProject")Profit 2</p>
<div class="loss">
  LOSS ... click here
</div>
<p class="lossOfProject">Profit 1</p>
<p class="profitOfProject")Profit 2</p>
<div class="loss">
  LOSS ... click here
</div>
<p class="lossOfProject">Profit 1</p>
<p class="profitOfProject")Profit 2</p>
<div class="loss">
  LOSS ... click here
</div>
<p class="lossOfProject">Profit 1</p>
<p class="profitOfProject")Profit 2</p>

＆＃13;

Answer 3

您可以使用＆＃39; $（this）＆＃39;在你的函数中定位你当前正在盘旋的段落：

$('.loss').mouseover(function(){
           $(this).height();
           $(this).fadeIn();
 });

循环时jquery mouseover

3 个答案: