新项目的所有列表项弹出窗口在悬停时立即显示 - Javascript

All list item popovers for new items showing at once on hover- Javascript

本文关键字：悬停 显示 Javascript 窗口 列表 新项目      更新时间：2023-09-26

因此，我的页面上有一个来自SQL Server数据库的项目的分类列表。我在较新的项目旁边也有星星来吸引用户的注意力。当用户将鼠标悬停在每个新项目上时，我的代码应该希望显示每个新项目的弹出框。我的问题是，无论我悬停在什么新物品/星星上，它们都会立即出现。我尝试为每个项目使用 for 循环，并在不同的尝试中为每个<li>提供一个唯一的类或 id。这是循环遍历 Db 的代码的一部分，还显示"新" 

<li>
    <?php 
        if(strtotime($itemDetails['posted']) > (strtotime('-30 days'))){
            echo '<i class="icon-star" data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item"></i>';}
            echo '<a href="newGenView.php?id='.$itemid.'">'.$itemDetails['name'].' - '.$itemDetails['description'].'</a>';
    ?>
</li>
<?php
    }//foreach
    echo '</ul>';
    }//foreach
?>

这是实例化弹出框的代码。

<script type="text/javascript">
$(document).ready(function() {
    $('.icon-star').popover(options);
});
</script>
<script>
    $("i").hover(function () {
    $('.icon-star').popover('show');
    });
</script>

在不知道"popover"函数属于哪个库的情况下，我会说你需要稍微改变一下你的javascript。$（"i"）.hover（...） 代码将使你的弹出框发生在所有"i"元素上。

尝试类似操作：

<script type="text/javascript">
    $(document).ready(function() {
        $('.icon-star').popover('show');
    });
</script>
相关文章：