Question

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

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

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

// JS FILE：

$(".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>";
}

Answer 1

与您的回答直接相关，您需要将您的班级名称替换为“这个”。并找到相关的元素。

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

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

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

但是，作为一点注意事项，你最好用CSS而不是JS来做这件事。我会让你看看：）

这是一个有效的j sfiddle demo

如何在jQuery中使用hoverfunction单独应用于数据库图像？

1 个答案: