Question

我正在制作产品候选名单功能。我有每个产品的网格视图＆amp;我已经为每个网格单元提供了一个短名单链接。现在我想在页面加载和放大时最初隐藏每个单元格中的所有这些链接。当用户在该特定单元格上悬停时，在单元格内显示特定链接，当用户将光标移出单元格时，再次隐藏该链接。这个单元格只不过是一个div。

短名单链接位于具有类product-grid-item的div中。此div只是我想要悬停的网格单元格。实际上使用切换功能我能够显示/隐藏短名单链接，但我的代码生成多个网格单元i，e div所以当我将鼠标悬停在特定网格上时，链接将显示，但它也会显示其他链接网格也是如此。我只想显示网格中的特定链接，用户不会在其他网格单元格中悬停所有链接。

如何使用jQuery实现这一目标？这是我的代码：

<?php foreach ($products as $index=>$product):?>
  <div class="product-grid-item grid-cell">
    <div class="shortlist" style="display: none; float:right;">
    <?php
      echo CHtml::ajaxLink('<i class="fa fa-star"></i> Shortlist',Yii::app()->createUrl('productshortlist/shortlistproduct'),
        array('data'=>array('productId' => $product->product_id),
        'dataType'=>'text',
        'type'=>'get',
        'success'=>'function(result)
                    {
                      if(result == "Success")
                      {
                        alert("Product Added to the shortlist successfully.");
                        $("#shortlistedProduct").prop("disabled",true);
                      }
                      else
                        $("#shortlist_product_error").html(result);
                      }'),
        array('id'=>'shortlistedProduct'.$index)
      );
    ?>
    </div>
  </div>
<?php endforeach;?>

输出：

 <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>

建议但无效的脚本：

<script>
    $(".product-grid-item").hover(function()
    {
        $(".shortlist").toggle();
    }
   );
</script>

Answer 1

尝试为div-s添加css，以使用hover css selector - http://www.w3schools.com/cssref/sel_hover.asp

显示或隐藏链接

我仍然认为即使您无法通过为css hover selector添加product-grid-item div来显示shortlist div来解决此问题，也只能使用jQuery添加htat { {1}}代替css或jQuery toggle()。

Answer 2

如果是，请确保您已包含jQuery然后尝试此代码

<script>
$(document).ready(function() {


    $(".product-grid-item").hover(function()
    {
        $(".shortlist").toggle();
    }
   );
});

</script>

Answer 3

现在我们可以获取您的所有信息，我们最终可以回答您的问题

＆＃13;

$(function () {
    $(".product-grid-item").hover(function () {
        $(this).find(".shortlist").toggle();
    });
});

＆＃13;

.shortlist {display: none; float:right;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product-grid-item grid-cell">Hover on me
    <div class="shortlist">
        <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a>
        <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>
    </div>
</div>
<div class="product-grid-item grid-cell">Hover on me
    <div class="shortlist">
        <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a>
        <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a>
    </div>
</div>

＆＃13;

隐藏＆amp;使用jquery在页面上显示多个链接

3 个答案: