如何使jQuery中的悬停函数单独应用于数据库映像

How to make a hoverfunction in jQuery individually apply to database images?

本文关键字：单独 应用于 数据库 映像 函数 悬停 何使 jQuery      更新时间：2023-09-26

我有一个本地数据库，正如你在下面的PHP代码中看到的，我正在从数据库中获取图像并将其显示在我的网页上。

在我的jQuery脚本中，我告诉它更改CSS特性z-index和border color，并在悬停在图像上时应用灰度过滤器。（在我的问题得到回答后，我将添加更多的效果，所以请不要建议只使用CSS：）

然而，当我这样做时，它会将效果应用于所有图像，因为它们都属于.singleproject类。显然，我只希望效果显示在我用鼠标悬停的单个图像上，而不是同时显示所有图像。有人知道使用jQuery最有效的方法是什么吗？

//JS文件：

$(".singleproject").hover(function(){
    $(".textproject").css("z-index", 0);
    $("#projects img").css("border-color", "#34475e");
    $("#projects img").css("-webkit-filter", "grayscale(0)");
}, function(){
    $(".textproject").css("z-index", -1);
    $("#projects img").css("border-color", "#cecece");
    $("#projects img").css("-webkit-filter", "grayscale(1)");
});

//PHP文件：

<script type="text/javascript" src="javascript/portfoliotext.js" defer></script> 


require_once("php/connectie.php");

$projectquery="SELECT * FROM projecten ORDER BY projectid DESC LIMIT 15";
$projectresult= mysqli_query($con, $projectquery);
while($projectrow = mysqli_fetch_array($projectresult)){
    echo "<a href='projects/" . $projectrow['projectafbeelding'] 
    . "' rel='lightbox'><div class='singleproject'><img src='projects/" . $projectrow['projectafbeelding'] . "'/>";
    echo "<div class='textproject'><h4>" . $projectrow['projectnaam'] . "</h4>";
    echo "<p>"  . $projectrow['projectbeschrijving'] . "</p>";
    echo "</div></div></a>";
}

与您的答案直接相关，您需要将类名换成"this"，并查找相关元素。

$(".singleproject").hover(function() {
    $(this).find(".textproject").css("z-index", 0);        
}, function(){
    $(this).find(".textproject").css("z-index", -1);
}

至于其他元素，我看不到任何带有id#项目的元素，但我想你们想要类似的东西。

$(this).find('img').css(/* whatever */);

不过，需要注意的是，使用CSS而不是JS可能会更好。我让你看看：）

这是一个正在工作的jsfiddle演示

相关文章：